在Ember中输入绑定

时间:2016-07-07 15:32:17

标签: javascript ember.js

我有一个表单和实时预览表单将创建的内容。

我的模特

//campaign.js
export default Model.extend({
  title: attr('string'),
  body: attr('string')
});

在路线

// new.js
export default Ember.Route.extend({
  model () {
    return this.store.createRecord('campaign', {
      title: null,
      body: null
    })
  }
});

我当前的实现使用输入组件

export default Ember.Component.extend({
  keyPress(event) {
    // binding code
  }
});

在模板中

{{#title-input}}
{{/title-input}}
<div id="title-preview"></div>

我的感觉是有更清洁或更惯用的方式来做到这一点。我是新来的,所以感谢你的帮助

1 个答案:

答案 0 :(得分:1)

虽然使用组件非常引人注目,但在ember中捕获表单输入并不是必需的。它的价值是什么。对于简单的表单输入,路径可以是:

setupController() {
    Ember.set('controller','newCampaign', {}); //set empty newCampaign
},

# Action hash would create the new record but only when you have some data.
actions: {
    createCampaign(newCampaign) {
            let newRecord = this.store.createRecord('campaign', newCampaign); //create record
            newRecord.save().then(( /* response */ ) => {
                this.transitionTo('campaigns'); //transition to different page.
            }, (error) => { // Deal with an adapter error
                //handle error
                //rollback if necessary
            });
    }
}

表单或模板可以是:

{{input name="title" id="title" value=newCampaign.title type="text"}}
{{input name="body" id="body" value=newCampaign.body type="text"}}

只是一个建议。

杰夫