Ember.js Binding without a view - ember.js

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