Question

我一直在学习Ember.js，并决定开发一个名为Finance app的简单应用程序，用户可以在其中添加项目，例如“汽车保险”，以便显示。每个项目都会显示项目的日期，标题，说明和金额。

我的问题是使用bind-attr将disabled = isNotComplete绑定到一个按钮。如果用户没有填写文本字段，我不希望按钮正常工作。问题是绑定到按钮的唯一属性是data-bindattr-3 =＆＃39; 3＆＃39;。我在finances_controller.js中定义了isNotComplete，并添加了一个＆＃39; newTitle＆＃39;属性。我已经在stackoverflow和google上搜索了解决方案，但我做错了。

的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，它是属性，而非动作。

Ember.js 1.5.1 bind-attr禁用按钮

1 个答案: