Ember.js – 将按钮操作从 #each 循环绑定到其自己的模型

Ember.js – Binding a button action from an #each loop to its own model

本文关键字：绑定 循环 模型 自己的 #each js 按钮 操作 Ember      更新时间：2023-09-26

我似乎无法获得在#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方法。然而，情况似乎并非如此。其他一些对象似乎正在处理单击操作，其中未定义"保存"手柄。我在这里错过了什么吗？如何使每个行项的按钮调用其自己的模型上的处理程序？

提前感谢任何帮助！

您可以通过设置 - 惊喜 - 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);
    }
});
有两种

可能的方法

{{#each answer in effort_reasons itemController="module_answer"}}
{{/each}}
因此，每个项目

都有自己的控制器，其中模型是每个项目（在本例中为答案），这对于输入视图之类的东西特别有用，其中 valueBinding 将导致将每个输入视图绑定到相同的值。请注意，这是 Ember 中的控制器不是单例并且具有不同 ID 的唯一一次，如果您想将值保存在原始控制器中，您可以通过以下方式获取引用

this.get('controller.parentController')

在您的项目控制器中。

或者您在每个循环中使用上述操作方法 

{{action "actionname" parameter paramter2...}}
相关文章：