2012-01-13 5 views
1


Ember.js를 사용하려면 다음 예제 (아래 참조)를 사용하고 텍스트 필드에 내용을 입력하고 Enter 키를 누르면 모든 것이 올바르게 작동합니다. 그러나 단추를 누를 때 어떻게 동일한 결과를 얻을 수 있습니까? 단추를 클릭 할 때 텍스트 필드의 값을 바인딩하는 방법은 무엇입니까? 견해를 가지고 일합니까?
미리 감사드립니다.버튼을 눌렀을 때 텍스트 필드에서 값 바인딩

<script type="text/x-handlebars"> 
    {{view App.TextField}} 
    {{#view Ember.Button target="App.peopleController" action="addPerson"}} 
    Add Person 
    {{/view}} 
    <ul id='todo-list'> 
    {{#each App.peopleController }} 
    <li>{{name}}</li> 
    {{/each}} 
    </ul> 
</script> 
<script> 
    App = Em.Application.create(); 

    App.peopleController = Em.ArrayController.create({ 
    content: [{name: "Tom"}, {name: "Mike"}], 

    addPerson: function(name) { 
     this.unshiftObject(App.Person.create({name: name})); 
    } 
    }); 

    App.Person = Em.Object.extend({ 
    name: null 
    });  

    App.TextField = Em.TextField.extend({ 
    insertNewline: function() { 
     App.peopleController.addPerson(this.get("value")); 
     this.set("value", ""); 
    } 
    }); 
</script> 

답변

2

이 실제로 달성하기가 조금 까다 롭습니다,하지만 난 jsFiddle에서 예를 재 작업했습니다 내가보기 서브 클래스의 컨트롤러에 하드 코딩 참조에 대해 권합니다 http://jsfiddle.net/ebryn/vdmrA/

. 그렇게하면 해당보기 구성 요소를 다른 곳에서 다시 사용할 수 없습니다.

+0

감사! 이것은 완벽하게 작동하며 내가 찾고 있던 것입니다. 또한 컨트롤러에 대한 참조를 하드 코드하지 않는 것이 좋습니다. – Mimay

0

Ember Button에 대한 코드에서 예상되는 이름 매개 변수를 지정하지 않고 addPerson 함수를 호출한다고 생각합니다. addPerson 함수에 전달할 입력 필드의 값을 얻으려면 해당 버튼에 대한 별도의보기를 작성해야 할 수도 있습니다.

App.MyButton = Em.Button.extend({ 
    click: function(){ 
    var value = App.TextField.get('value') 
    // etc 

    } 
관련 문제