Ember.View에서 하위 뷰 업데이트

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

에 사용자가 클릭 버튼을 제출하면, I 모든 양식 데이터를 서버로 전송하고 오류 메시지를 검색합니다.

제 질문은 어떻게 오류 메시지를 설정하는 "하위보기"App.TextField를 업데이트 할 수 있습니까? 다음

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

그리고 : (가 타다가 자동으로 생성 한 무시 있도록) form.handlebars에

Answer 1

을 App.Error 에러 메세지를 보관 유지하는 오브젝트 또한 ember-data를 사용할 계획이라면 validation 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>​ 

자바 스크립트 :

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

수동에 대한 ID를 설정 사용자 지정을 사용할 수

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