javascript - Ember.js – 将来自 #each 循环的按钮操作绑定(bind)到它自己的模型

Question

我似乎无法获得在 #each 模板循环中生成的按钮，以将其点击操作绑定(bind)到其关联模型。这是问题的快速演示...

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

我的假设是将“保存”指定为按钮的操作会将其绑定(bind)到其模型上的 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>​

围绕 Action 的 {{#with}} 助手是必需的，因为不知何故， Action 助手不接受 this 作为 target。

---

但请注意您的设计:应在 View 或 Controller 上调用操作。然后目标负责执行进一步的操作，例如保存，...

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

Handlebars :

<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);
    }
});