2015-04-30 31 views
1

我正在提交表单以在Ember.js中创建新的Review。该表单与我的reviews/new控制器上的操作相关联。在Ember中获取表单内所有值的散列

这里是我的形式:
模板/评论/ new.hbs

<form {{action "createReview" on="submit"}}> 
    {{input value=name}} 
    {{input value=content}} 

    <input type="submit" value="Post this review" class="button"> 
    </form> 


我的控制器:
控制器/评论/新/ JS

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    actions: { 
    createReview: function(params) { 
     console.log(this.get('name')); 
     console.log(this.get('content'); 
    } 
    } 
}); 

目前我的麻烦是访问表单字段值我非常有效的方法。请注意,this.get('name')确实会输出name输入字段的值,而this.get('content')的值也是如此。

但是,有没有一种很好的方式来获得所有的表单字段值的散列?喜欢的东西:this.get('allAttributes')这将输出:

{name: "John Doe", content: "Bla bla-bla bla blaaaaah"} 

编辑

content是一的余烬保留字。不要名称的属性在“内容”

回答

0

你可以有你的控制器上的对象,您使用的形式:

export default Ember.Controller.extend({ 
    formFields: Ember.Object.create(), 
    actions: { 
    createReview: function(params) { 
     console.log(this.get('formFields.name')); 
     console.log(this.get('formFields.content'); 
    } 
    } 
}); 

您需要使用灰烬对象,这样的绑定将工作。

<form {{action "createReview" on="submit"}}> 
    {{input value=formFields.name}} 
    {{input value=formFields.content}} 

    <input type="submit" value="Post this review" class="button"> 
    </form> 
+0

后续问题。比方说,OP有一个动作可以做出如下的Ajax调用: 'Ember。$。ajax('/ foo')。done(function(res){...});'。完成处理程序中有人更新'formFields'以正确更新View的正确方法是什么? – blong

0

评论模型是这个的重要对象。

// reviews/new route 
export default Ember.Route.extend({ 
    model: function() { 
    return this.store.createRecord('review', { 
     //predefined properties here 
    }); 
    }, 
    actions: { 
    // bubbling thru controller 
    createReview: function() { 
     this.get('model').save().then(function(review) { 
      // action you needs if any 
      self.transitionTo('reviews'); 
     }, function() { 
      // on errors 
     }); 
    }, 
    cancel: function() { 
     this.transitionTo('reviews'); 
    } 
    }, 
    deactivate: function() { 
    var model = this.modelFor(this.routeName); 
    if (model.get('isNew')) { 
     model.destroyRecord(); 
    } 
    } 
}); 


//template 
<form {{action "createReview" on="submit"}}> 
    {{input value=model.name}} 

    //errors example it depends of your backend and adapter 
    {{#each model.errors.name as |error|}} 
     <div class="error"> 
     {{error.message}} 
     </div> 
    {{/each} 

    {{input value=model.content}} 

    <input type="submit" value="Post this review" class="button"> 
    <button {{action "cancel"}}>Cancel</button> 
</form>