Question

抱歉，如果已经有人提出这样的问题，但我找不到我想要的东西。我想在问题的前言中说，我觉得我对内容绑定有一个很好的理解。我计划使用第三方jquery carousel插件，它需要div中的img标签列表才能正常工作。关于实际问题，假设我在App控制器中有一组图像的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绑定到当前网址而不在#each中嵌套另一个{{view}}？我尝试过很多种组合，但还是无法将手指放在正确的绑定上。

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

上面的把手脚本会出错，但我觉得这是最好的，为什么我可以沟通我想要做的事情。

提前感谢您的帮助。

编辑：经过一些研究后，我遇到了这个问题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>

所以我可以在我的视图上有一个点击处理程序。我还修改了插件，以便在#foo内部的div内部定位图像。

感谢所有答案。

Answer 1

好像你想要：

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

这对你有用吗？

Answer 2

您应该在srcBinding上使用{{view ... }}。请参阅示例：http://jsfiddle.net/M2S3Z/

如果您只想渲染图片而不需要呈现Ember.View标记的特定img，我会使用ebryn的答案。

模板：

<script type="text/x-handlebars" >
    <div id="foo">
        {{#each App.Controller}}
            {{view App.ImgView srcBinding="url"}}
        {{/each}}
    </div>
</script>

JS：

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

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

App.ImgView = Em.View.extend({
    tagName: 'img',
    didInsertElement: function() {
        console.log(this.get('src'));
    }
});

Answer 3

我宁愿使用像这样利用Ember视图的力量：

App.ImageView = Ember.View.extend({
  tagName: 'img',
  attributeBindings: ['src'],
  src: url_attribute_or_variable
});

Ember.js绑定没有视图

3 个答案: