2016-07-07 3 views
0

양식과 양식의 실시간 미리보기가 있습니다.Ember에서 입력 바인딩

경로에서 내 모델

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

제 느낌은 이것을하는 데 더 깔끔하고 관용적 인 방법입니다. 나는 엠버 (ember)를 처음 사용하기 때문에 어떤 도움을 주셔서 감사합니다.

+1

'return this.store.createRecord ('campaign ')'을 호출 할 수 있습니다. 속성은 기본적으로 정의되지 않습니다. –

답변

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