Ember.js 没有 View 的绑定(bind)

Question

抱歉，如果已经有人问过类似的问题，但我找不到我正在寻找的确切内容。在回答这个问题之前，我想说我觉得我对内容绑定(bind)有很好的理解。我计划使用第三方 jquery 轮播插件，该插件需要 div 中的 img 标签列表才能正常工作。关于实际问题，假设我有一个应用程序 Controller 中图像的 url 集合。假设内容将包含实际图像的有效 url 列表。

App = Ember.Application.create({});

App.Controller = Em.Object.create({
    content: [{url: 'http://www.google.com'}, {url: 'http://www.yahoo.com'}]
});

App.ImgView = Em.View.extend({
    tagName: 'img'
});

如何将每个图像的 src 绑定(bind)到当前 url，而不在 #each 中嵌套另一个 {{view}}？我尝试了很多组合，但一直没能找到正确的绑定(bind)。

<div id="foo">
    {{#each App.Controller.content}}
        {{view App.ImgView bindAttr src="this.url"}}
    {{/each}}
</div>

上面的 Handlebars 脚本会出错，但我觉得这是我可以传达我想要做的事情的最佳方式。

预先感谢您的帮助。

编辑:经过更多研究，我遇到了这个问题 here 。显然，srcBinding 到字符串是 ember-0.9.4 中的一个错误，并已在 ember-0.9.5 中修复。我最终回到了类似的事情......

App.ImgView = Em.View.extend({
    tagName: 'div'
});

<div id="foo">
    {{#each App.Controller.content}}
        {{#view App.ImgView contentBinding="this"}}
            <img {{bindAttr src="content.url"}} />
        {{/view}}
    {{/each}}
</div>

这样我就可以在我的 View 上有一个点击处理程序。我还修改了该插件，以将 #foo 内的 div 内的图像作为目标。

感谢您的所有回答。

Answer 1

看起来你想要的是:

<div id="foo">
    {{#each App.Controller.content}}
        <img {{bindAttr src="url"}}>
    {{/each}}
</div>

这对你有用吗？