在Ember中的輸入綁定

Question

我有一個窗體將會創建的窗體和實時預覽。

我的模型

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

我的感覺是，有一個更清潔或更習慣的方式來做到這一點。我是新來的燼，所以謝謝你的任何幫助

Answer 1

雖然組件的使用引人注目，他們不需要捕獲表單輸入的燼。什麼是它的價值。對於簡單的表單輸入路徑可能是：

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

只是一個建議。

Jeff