Ember.js 1.5.1 bind-attr禁用按鈕

Question

我一直在學習Ember.js，並決定使用一個名爲Finance應用程序的簡單應用程序，其中用戶可以添加一個項目，例如「汽車保險」被顯示。該項目的日期，標題，描述和金額將爲每個項目顯示。

我的問題是關於使用bind-attr將disabled = isNotComplete綁定到按鈕。如果用戶沒有填寫文本字段，我不希望按鈕有效。問題是綁定到該按鈕的唯一屬性是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

拿isNotComplete出actions散列在Finances.FinancesController，它是一個屬性，而不是一個動作。