5

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

提前感谢您的帮助！

4

2 回答 2

10

您可以通过设置 -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);
    }
});
于 2012-06-01T16:34:47.340 回答
2

有两种可能的方式

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

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

this.get('controller.parentController')

在你的 itemController 里面。

或者您在每个循环中使用提到的操作方法

{{action "actionname" parameter paramter2...}}
于 2015-01-26T15:13:57.800 回答