按下按钮时从文本字段绑定值答案

【问题标题】：Binding value from textfield when pressing button按下按钮时从文本字段绑定值
【发布时间】：2012-02-10 00:53:15
【问题描述】：

我有以下示例（见下文）与 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>

【问题讨论】：

标签： ember.js

【解决方案1】：

我认为在您的 Ember 按钮代码中只是调用 addPerson 函数而不给它期望的名称参数。您可能必须为该按钮编写一个单独的视图，以便将输入字段的值传递给 addPerson 函数。

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

  }

【讨论】：

【解决方案2】：

这实际上有点难以完成，但我已经在 jsFiddle 中修改了您的示例：http://jsfiddle.net/ebryn/vdmrA/

我建议不要在视图子类中硬编码对控制器的引用。如果这样做，您将无法在其他地方重用这些视图组件。

【讨论】：

谢谢！这很完美，正是我想要的。也欢迎不要硬编码对控制器的引用的建议。