Question

Sorry If something like this has already been asked, but I can’t find exactly what I am looking for. I’d like to preface the question by saying that I feel I have a decent understanding of content bindings. I plan on using a third party jquery carousel plugin that requires a list of img tags in a div in order to work properly. On to the actual question, let’s say I have a collection of urls to images in an App controller. Assume that content will contain a list of valid urls to actual images.

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

How do I bind the src of each image to the current url without nesting another {{view}} in the #each? I’ve tried many combinations, but haven’t been able to put my finger on the correct bindings.

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

The handlebar script above will error out, but I feel like it’s the best why I can communicate what I am trying to do.

Thanks in advance for any help.

EDIT: After some more research I came across this issue here. Apparently srcBinding to a string was a bug in ember-0.9.4, and has been fixed in ember-0.9.5. I ended up going back to something like…

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>

so I could have a click handler on my view. I also modified the plugin to also target images inside of divs inside of #foo.

Thanks for all answers.

Answer 1

It seems like you want:

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

Does that work for you?