Question

我有一个简单的视图，它根据给定的items数组（简化代码）呈现图像集，使用它，因为我需要收集一些其他数据来构建＆＃39;所需的类名：

App.MyView = Ember.View.extend({
    buildTemplate: function () {
        var itemz = this.get('items');
        var classname = 'classNameDependingOnSomeCalculations...';
        var out = '<div>';
        $.each(itemz, function (index, obj) {
            out += '<img {{action myActionHere}} src="' + obj.href + '" alt="" class="'+classname+'"/>';
        });
        out += '</div>';
        return out;
    }.property('view'),
    defaultTemplate: Ember.Handlebars.compile(
        "<div>{{{view.buildTemplate}}}</div>"
    )
});

在模板中我将其用作

{{#each myObj in myCollection}}
    {{view App.MyView  itemsBinding="myObj.items" otherBinding="otherProps" }}
{{/view}}

不幸的是，这样Ember而不是绑定动作会将{{action myActionHere}}直接放入代码......

如何在构建动态模板时绑定动作？

我使用Ember 1.1.2

P.S。或者我应该使用其他方法来构建此视图？

Answer 1

有一种解决方法可以使这个工作与你在这里展示的视图一起工作......但这实际上并不是实现它的方式。如果由于某种原因你需要这种方法，我会为此添加一个答案，但我打算解决潜在的问题。

而不是像这里显示的那样，你应该在JSP中直接使用类似下面的代码：

{{#each myObj in myCollection}}
    <div>
    {{#each item in myObj.items}}
        <img {{action myActionHere}} src={{item.href}} alt='' class={{classNameFunction}}/>
    {{/each}}
    </div>
{{/each}}

如果您希望以视图形式执行此操作的原因是您可以在不重写代码的情况下重复使用此功能，请查看专门为此目的设计的partials。

Ember：如何将动作绑定到用JS生成的代码

1 个答案: