컨트롤러에서 구성 요소로 작업을 보내는 방법은 무엇입니까?

Question

구성 요소의 인스턴스가 여러 개인 컨트롤러가 있습니다.

// Template. 
{{#each foo in foos}} 
    {{my-component foo=foo}} 
{{/each}} 

제 컨트롤러에서 각 구성 요소에 대해 foo의 유효성을 검사하고 싶습니다.

// Controller. 
actions: { 
    validate: function() { 
    // for each component, call the "validate" action/function/whatever 
    // and deal with the result. 
    } 
} 

어떻게하면됩니까? 컨트롤러에서

Answer 1

여기 내 솔루션입니다를 참조하십시오. 엠버 양방향 바인딩 기능을 사용합니다.

// Template. 
{{#each foo in foos}} 
    {{my-component foo=foo.item foo=foo.isValid}} 
{{/each}} 

그리고 내 컨트롤러에서 나는 모든 구성 요소 경우 해결 약속을 반환 :

{ item: <my_data>, isValid: <boolean> }

그래서, 내 템플릿이된다 : 아래에서 볼 수 있듯이, 내 foo 데이터는 같은은 지금 isValid 속성이 true입니다.

// Controller. 
validate: function() { 
    var that = this; 

    return new Ember.RSVP.Promise(function (resolve, reject) { 
    var isValid = that.get('foos').isEvery('isValid', true); 
    return isValid ? resolve() : reject(); 
    }); 
} 

Answer 2

foos: null,// populated using set() somewhere 

validate: function() { 
    var foos = this.get('foos'); 
    foos.forEach(function(item) { 
    // process 
    }); 
}.property('foos') 

아무것도 더 필요 템플릿에서 수행 할 수는이 {{각각}}, FOOS에 바인딩됩니다.

템플릿 (foo 항목) 변경시 템플리트가 변경되는 좀 더 정교한 예제의 경우 Ember.ArrayProxy을 사용할 수 있습니다.

Answer 3

컨트롤러에 validate이라는 속성을 지정하고 해당 속성을 구성 요소에 전달할 수 있습니다. 이 속성은 컨트롤러와 구성 요소 사이에 바인딩되어 있으므로 구성 요소 내부에서 해당 속성을 관찰 (관찰)하고 컨트롤러에서 true로 설정되면 유효성 검사를 수행 할 수 있습니다.

App.IndexController = Ember.ArrayController.extend({ 
    validate: false, 
    actions: { 
    validate: function(){ 
     this.set('validate', true); 
    } 
    } 
}); 

App.MyComponentComponent = Ember.Component.extend({ 
    foo: null, 
    validate: false, 

    needsValidation: function(){ 
    alert("Validated!"); 
    }.observes('validate') 
}); 

그런 다음 템플릿에 당신은 같은에 validate 속성을 전달합니다

{{ my-component foo=item validate=validate}} 

가 작동 예를 here