Emberjs根据表格输入和显示答案进行计算

Question

这里是超级编码n00b。我试图在emberjs中创建一个营养计算器。如果我有一个如下所示的用户输入表单，我在哪里编写计算功能，如何显示答案？

    <form>
      <div class="form-group">
        <label for="weight">Weight</label>
        {{input type="text" id="weight" class="form-control" value=weight}}
      </div>
      <div class="form-group">
        <label for="runduration">How long will you be running? (hours)</label>
        {{input type="text" id="runduration" class="form-control" value=runduration}}
      </div>
      <div class="form-group">
        <label for="cycleduration">How long will you be cycling?</label>
        {{input type="text" id="cycleduration" class="form-control" value=cycleduration}}
      </div>
      <button {{action calculate}}>Calculate nutrition</button>
    </form>

我会在控制器中编写该功能吗？

在我的路由器中，我有以下内容，但我只是保留输入表单并在同一模板上显示计算营养calc.hbs

  this.route('nutritioncalc');
  this.resource('new-nutritioncalc', { path: '/nutritioncalc/new' });  

感谢。

Answer 1

Ember用输入字段中的数据填充value=variable。 您可以在NewNutritioncalcController。

中访问它们

App.NewNutritioncalcController = Ember.ObjectController.extend({
  actions: {
    calculate: function(){
      var weight = this.get('weight'),
          runduration = this.get('runduration'),
          cycleduration = this.get('cycleduration');
    }
  }
});

动作冒泡

操作从关联的控制器传播到路径链。

文档

这是action bubbling documentation。

如果控制器没有实现与其操作对象中的操作同名的方法，则该操作将被发送到路由器，其中当前活动的叶子路由将有机会处理该操作。

双向绑定

以下是关于two way data binding in Ember的博文。

无论您是更改模板中的属性（例如在文本框中键入）还是在javascript中（例如通过单击按钮），在这两种情况下，更改都会反映到属性或属性的所有位置变量被使用。