Обновить подменю из Ember.View

Question

Я делаю ajax-форму с вызовами API-интерфейса сервера. Сервер может возвращать сообщения об ошибках для определенных полей (пример: url => 'Этот URL неверен').

Так я создал конкретный вид для моей формы текстового поля:

(textfield.handlebars) 
{{view Ember.TextField valueBinding="value"}} 
{{#if hasError}} 
    <div class="error">{{errorMessage}}</div> 
{{/if}} 

(textfield.js) 
App.TextField = Ember.View.extend({ 
    hasError: false, 
    errorMessage: "", 
    templateName:  "textfield", 
}); 

И в моем шаблоне вида формы у меня есть:

(form.handlebars) 
<div class="form-row"> 
    <div class="form-element"><div class="input-wrapper">{{view App.TextField valueBinding="skill.job"}}</div></div> 
</div> 

(new.js) 
submit: function() { 
    var skill = this.get("skill"); 

    skill.saveResource() 
    .fail(function(e) { 
     //how could I set the errorMessage in my App.TextField 
    }); 
} 

Когда пользователь нажимает на кнопку отправки, я 'отправка всех форм данных на сервер и получение сообщений об ошибках.

Мой вопрос в том, как сделать, чтобы обновить «subview» App.TextField, чтобы установить сообщения об ошибках?

Answer 1

Вы можете использовать пользовательские App.Error объект, который содержит сообщения об ошибках. Кроме того, если вы планируете использовать данные ember-данных, есть обсуждение валидации https://github.com/emberjs/data/pull/130. И есть расширение валидации в превосходных дополнениях Ember.js: https://github.com/capitainetrain/ember-addons/tree/master/packages/ember-validators/lib.

Вот что я имею в виду, см http://jsfiddle.net/pangratz666/kQJ2t/:

Рули:

<script type="text/x-handlebars" data-template-name="edit" > 
    name: {{view App.TextField valueBinding="content.name" propertyName="name" }}</br> 
    age: {{view App.TextField valueBinding="content.age" propertyName="age" }}</br> 
    <button {{action "save"}}>save</button> 
</script>​ 

JavaScript:

App.Error = Ember.Object.extend({ 
    isError: function(propertyName) { 
     return !Ember.empty(this.getErrorMessage(propertyName)); 
    }, 
    getErrorMessage: function(propertyName) { 
     return this.get(propertyName); 
    } 
}); 

App.ErrorMixin = Ember.Mixin.create({ 
    classNameBindings: ['isError:error'], 
    errorBinding: 'parentView.error', 

    template: Ember.Handlebars.compile('{{#if isError}}{{errorMessage}}{{/if}}'), 

    isError: function() { 
     var error = this.get('error'); 
     return error && error.isError(this.get('propertyName')); 
    }.property('error', 'propertyName'), 

    errorMessage: function() { 
     var error = this.get('error'); 
     if (error) { 
      var propertyName = this.get('propertyName'); 
      return error.getErrorMessage(propertyName); 
     } 
    }.property('error', 'propertyName') 
}); 

App.TextField = Ember.TextField.extend(App.ErrorMixin); 

Объект ошибки затем строится следующим образом:

Ember.View.create({ 
    templateName: 'edit', 
    contentBinding: 'App.obj', 
    save: function() { 
     var content = this.get('content'); 
     var error = this.get('error'); 
     if (error) { 
      error.destroy(); 
     } 

     error = App.Error.create(); 

     if (content.get('age') <= 100) { 
      error.set('age', 'sorry, you are not wise enough'); 
     } 

     if ('Chuck Norris' === content.get('name')) { 
      error.set('name', 'yeah, and i am the queen of england'); 
     } 

     this.set('error', error); 
    } 
}).append();​ 

Answer 2

На form.handlebars установлен идентификатор для него вручную (так он будет перекрывать тот, который уголек генерирует автоматически):

<div class="form-row"> 
    <div class="form-element"><div class="input-wrapper">{{view App.TextField id="skill_job" valueBinding="skill.job"}}</div></div> 
</div> 

И потом:

submit: function() { 
    var skill = this.get("skill"); 

    skill.saveResource() 
    .fail(function(e) { 
     Ember.View.views["skill_job"].set('errorMessage', 'blah'); 
     Ember.View.views["skill_job"].set('hasError', true); 
     // of course you will probably want to handle this message from the request or whatever, hope you get the idea 
    }); 
}