Ember.js 1.5.1 bind-attr이 (가) 버튼으로 비활성화되었습니다.

Question

저는 Ember.js를 배우면서 사용자가 '자동차 보험'과 같은 항목을 추가 할 수있는 Finance 앱이라는 간단한 응용 프로그램을 사용하기로 결정했습니다. 표시 할 수 있습니다. 항목의 날짜, 제목, 설명 및 금액이 각 항목에 대해 표시됩니다.

제 질문은 disabled-isNotComplete를 버튼에 바인드하기 위해 bind-attr을 사용하는 것에 관한 것입니다. 사용자가 텍스트 필드를 채우지 않은 경우 단추 기능을 원하지 않습니다. 문제는 버튼에 바인딩 된 유일한 속성은 data-bindattr-3 = '3'입니다. finances_controller.js에 isNotComplete를 정의하고 'newTitle'속성을 추가했습니다. 나는 stackoverflow 및 구글 솔루션에 대한 검색했지만 뭔가 잘못하고 있어요.

index.html을

<script type="text/x-handlebars" id="finances"> 
    <section id="financeapp"> 
     <header id="header"> 
      <h1>Finance App</h1> 
     </header> 

     <section id="main"> 
      <p>To create a new finance fill out the fields below</p> 

      <button id="createItemBtn" {{action 'createItem'}}>Create an item</button> 
      <div id="createItemForm"> 
       <form {{action 'createFinance' on='submit'}}> 
        {{input type="text" id="new-finance-date" placeholder="Date: MMDDYYYY" value=newDate size="18" maxlength="8" autofocus="autofocus"}} 
        {{input type="text" id="new-finance-title" placeholder="What is the name of the finance item?" value=newTitle size="35" maxlength="50"}} 
        {{textarea id="new-finance-description" placeholder="Enter a description of the finance item" value=newDescription rows="5" cols="34" maxlength="100"}} 
        {{input type="text" id="new-finance-amount" placeholder="Enter an amount in US($)" value=newAmount size="25"}} 
        <button id="submit" type="submit" {{bind-attr disabled=isNotComplete}}>Add</button> 
       </form> 
      </div> 

      <ul id="finance-list"> 
       {{#each}} 
       <li class="edited"> 
        <input type="checkbox" class="toggle" /> 
        <label>{{dateof}}</label> 
        <label>{{title}}</label> 
        <label>Description: {{description}}</label> 
        <label>Amount: {{amount}}</label> 
        <button class="destroy"></button> 
       </li> 
       {{/each}} 
      </ul> 
     </section> 

     ... 
</script> 

finance.js - 금융 모델

Finances.Finance = DS.Model.extend({ 
    title: DS.attr('string'), 
    dateof: DS.attr('string'), 
    amount: DS.attr('string'), 
    description: DS.attr('string') 
}); 

Finances.Finance.FIXTURES = [ 
    { 
     id: 1, 
     title: 'Rent', 
     dateof: 'July 4, 2014', 
     amount: '$60.00', 
     description: 'Exum studio rent money.' 
    }, 
    { 
     id: 2, 
     title: 'Tuition', 
     dateof: 'June 22, 2014', 
     amount: '$500.00', 
     description: 'Palomar College tuition.' 
    }, 
    { 
     id: 3, 
     title: 'Car Registration', 
     dateof: 'June 10, 2014', 
     amount: '$120.00', 
     description: 'Toyota Tacoma registration payment.' 
    } 
]; 

finances_controller.js - 재정 컨트롤러

Finances.FinancesController = Ember.ArrayController.extend({ 
actions: { 
    createFinance: function() { 
     var dateof = this.get('newDate'); 
     var title = this.get('newTitle'); 
     var description = this.get('newDescription'); 
     var amount = this.get('newAmount'); 

     // create the new Finance model 
     var finance = this.store.createRecord('finance', { 
      dateof: dateof, 
      title: title, 
      description: description, 
      amount: amount 
     }).save(); 

     // Clear the "New Finance" text field 
     this.set('newDate', ''); 
     this.set('newTitle', ''); 
     this.set('newDescription', ''); 
     this.set('newAmount', ''); 
    }, 
    createItem: function() { 
     var elem = document.getElementById("createItemForm"); 
     elem.style.display = "block"; 
    }, 
    isNotComplete: function() { 
     return Ember.isEmpty(this.get('newTitle')); 
    }.property('newTitle') 
} 
}); 

,

모든 도움에 감사드립니다! =)

Answer 1

Finances.FinancesController에있는 actions 해시 중에서 isNotComplete 해시를 취하면 행동이 아닌 속성입니다.