从Ember更新子视图。查看

Question

我正在做一个带有服务器API调用的ajax表单。 服务器可以为特定字段返回错误消息（例如：url =>'This url is incorrect'）。

所以我创建了一个特定的观点为我的文本字段的形式：

(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 
    }); 
} 

当用户点击提交按钮，我将所有表单数据发送到服务器并检索错误消息。

我的问题是我该如何更新“子视图”App.TextField来设置错误消息？

Answer 1

您可以使用自定义App.Error保存错误消息的对象。另外，如果您打算使用余烬数据，则有关于验证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手动设置一个ID为它（这样将覆盖烬自动生成一个）：

<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 
    }); 
}