javascript - Ember 中的输入绑定(bind)

Question

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

我的模型

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

在 route

// 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>

我的感觉是有一种更干净或更惯用的方式来做到这一点。我是 Ember 新手，感谢您的帮助

Answer 1

虽然组件的使用很引人注目，但在 ember 中捕获表单输入并不需要它们。它的值(value)是什么。对于简单的表单输入，路线可以是:

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"}}

只是一个建议。

杰夫