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

Answer 2

有两种可能的方法

{{#each answer in effort_reasons itemController="module_answer"}}
{{/each}}

因此每个Item都有自己的控制器，其中model是每个项目（在本例中为答案），这对于像InputView这样的东西特别有用，其中valueBinding会导致将每个输入视图绑定到相同的值。请注意，这是Ember中的控制器不是单例，并且具有不同ID的唯一时间，如果要将值保存在原始控制器中，可以通过

获得参考。

this.get('controller.parentController')

在itemController中。

或者您使用

中每个循环内部提到的操作方法

{{action "actionname" parameter paramter2...}}

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

2 个答案: