Ember.JS 值绑定在操作中不起作用答案

【问题标题】：Ember.JS value binding not working in ActionEmber.JS 值绑定在操作中不起作用
【发布时间】：2015-11-24 14:34:16
【问题描述】：

我正在尝试让值绑定在我的 Ember 应用程序中正常工作。绑定适用于输入，例如，当我在输入字段中键入文本时，它会显示在“您的目标：”旁边。但是，当我单击“下一步”时，它没有正确显示该值。

这是与我的问题有关的 JSBIN：http://emberjs.jsbin.com/buxega/edit?html,js,console,output

目标路线

import Ember from 'ember';

export default Ember.Route.extend({
  goal: '',
  actions: {
    nextStep: function() {
      console.log('Goto next step: ', this.get('goal'));
    }
  }
});

模板

<section>
  <div class="pod__content">
    Your Goal: {{goal}}
    {{input type="text" value=goal}}
  </div>
  <footer>
    <button {{action 'nextStep'}} class="btn btn--red">Next Step</button>
  </footer>
</section>

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

您在控制器中设置值{{goal}}，而不是在路由中。

import Ember from 'ember';

export default Ember.Controller.extend({
  goal: '',
  actions: {
    nextStep: function() {
      console.log('Goto next step: ', this.get('goal'));
    }
  }
});

http://emberjs.jsbin.com/nabeqakicu/1/edit?html,js,console,output

如果你想将值发送到路由，你可以这样做：

<button {{action 'nextStep' goal}} class="btn btn--red">Next Step</button>

你会在你的行动中得到它：

export default Ember.Route.extend({
  goal: '',
  actions: {
    nextStep: function(goal) {
      console.log('Goto next step: ', goal);
    }
  }
});

【讨论】：

我在他们的文档中看到了他们将在未来摆脱控制器的内容。我应该避免在新的 Ember 应用中使用控制器吗？
如果不想在controller中处理action，可以直接用goal in参数将action发送到路由。但是您必须了解goal 无论如何都会在控制器中设置。否则，您需要使用组件。

【解决方案2】：

定义属性的另一种方式

export default Ember.Route.extend({
    setupController: function(controller, model) {
            this._super(controller, model);

            controller.setProperties({
                foo: 'bar'
            });
     }
});

【讨论】：