ember.js - Ember 表单值未定义

Question

我有一个类似的表单，当我想在 newItem 控制器中获取提交的值时，我会得到“未定义”的值。怎么了？

<form role="form" {{ action 'add' target="newItem" on="submit"}}>
    <h2>New category</h2>
    <div class="form-group">
      <label>Category title</label>
      {{input value=title class="form-control" type="text" placeholder="Title"}}
    </div>
    <div class="form-group">
      <label>Category description</label>
      {{textarea value=description class="form-control" placeholder="Description"}}
    </div>
    <div class="form-group">
      {{input type="submit" class="btn" }}
    </div>
  </form>

App.NewItemController = Ember.ObjectController.extend({
    add: function(){
      console.log(this.get('title')); // undefined
    }
  });

更新：
此表格在 ApplicationRoute 上：

 App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
      var newItem = this.controllerFor('NewItem');
      controller.set('newItem', newItem);
    }
  });

Answer 1

您应该尝试使用Ember.TextFieldand Ember.TextArea：

<form role="form" {{ action 'add' target="newItem" on="submit"}}>
    <h2>New category</h2>
    <div class="form-group">
      <label>Category title</label>
      {{view Ember.TextField valueBinding="title"}}
    </div>
    <div class="form-group">
      <label>Category description</label>
      {{view Ember.TextArea valueBinding="description"}}
    </div>
    <div class="form-group">
      {{input type="submit" class="btn" }}
    </div>
</form>

和值现在绑定到相应的输入字段title。description

更新：

我看到你的目标是newItem控制器，所以我的猜测是这个表单没有绑定到NewItemController，因此值没有绑定到NewItemController. 一个解法：

App.MyFormController = Ember.Controller.extend({

    needs: ['newItem']

    add: function(){
        var newItemController = this.get('controllers.newItem');
        newItemController.add(this.get('title'), this.get('description'));
    }
});

App.NewItemController = Ember.ObjectController.extend({
    add: function(title, description){
      // add the new item here
    }
});