Ember.js Binding without a view

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?

Answer 2

You should use srcBinding on your {{view ... }}. See example: http://jsfiddle.net/M2S3Z/

If you just want to render an image and don't need a specific Ember.View which renders the img tag, I would use ebryn's answer.

Template:

<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

I would rather use something leveraging power of Ember views like this:

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