Ember.js - 将#each循环中的按钮动作绑定到自己的模型

Question

我似乎无法在#each模板循环中生成一个按钮,将其单击操作绑定到其关联的模型.这是问题的快速演示......

该Ember.js应用程序的设置:

window.Contacts = Ember.Application.create();

Contacts.Person = Ember.Object.extend({
    first: '',
    last: '',
    save: function() {
        // send updated information to server.
    }
});

Contacts.contactsList = Ember.ArrayController.create({
    content:[],
    init: function() {
        this.pushObject( Contacts.Person.create({
            first:'Tom',
            last:'Riddle'
        }));
    }
});

模板:

<script type="text/x-handlebars">
    {{#each Contacts.contactsList}}
    <li>
        {{view Ember.TextField valueBinding="first" viewName="firstname"}}
        {{view Ember.TextField valueBinding="last" viewName="lastname"}}
        <button {{action "save" on="click"}}>Save</button>
    </li>
    {{/each}}
</script>

问题:

因此,在这个简单的演示场景中的想法是每个记录的"保存"按钮将触发一个动作来保存自己模型的状态.但是,单击"保存"按钮会出错:

Uncaught TypeError: Cannot call method 'call' of undefined

我的假设是将"save"指定为按钮的动作会将其绑定到save其模型上的方法.但是,情况似乎并非如此.其他一些对象似乎正在处理单击操作,其中"保存"处理程序未定义.我在这里错过了什么吗？如何让每个订单项的按钮在自己的模型上调用处理程序？

在此先感谢您的帮助!

Answer 1

您可以通过设置 - surprise - target属性来定义操作的目标,请参阅http://jsfiddle.net/pangratz666/FukKX/:

<script type="text/x-handlebars" >
    {{#each Contacts.contactsList}}
    <li>
        {{view Ember.TextField valueBinding="first" viewName="firstname"}}
        {{view Ember.TextField valueBinding="last" viewName="lastname"}}
        {{#with this as model}}
            <button {{action "save" target="model"}}>Save</button>
        {{/with}}
    </li>
    {{/each}}
</script>?

在{{#with}}因为莫名其妙的动作助手不接受,需要绕动作助手this作为target.

但请注意您的设计:应该在视图或控制器上调用操作.然后目标负责执行保存等进一步的操作......

所以我将按如下方式实现您的示例,请参阅http://jsfiddle.net/pangratz666/U2TKJ/:

把手:

<script type="text/x-handlebars" >
    {{#each Contacts.contactsList}}
    <li>
        {{view Ember.TextField valueBinding="first" viewName="firstname"}}
        {{view Ember.TextField valueBinding="last" viewName="lastname"}}
        <button {{action "save" target="Contacts.contactsController" }}>Save</button>
    </li>
    {{/each}}
</script>?

JavaScript:

Contacts.contactsController = Ember.Object.create({
    save: function(event) {
        console.log('do something with: ', event.context);
    }
});