Ember.js Enlace sin vista

Question

Lo siento si ya se ha preguntado algo como esto, pero no encuentro exactamente lo que estoy buscando.Me gustaría comenzar la pregunta diciendo que creo que tengo una comprensión decente de los enlaces de contenido.Planeo usar un complemento de carrusel jquery de terceros que requiere una lista de etiquetas img en un div para funcionar correctamente.Pasando a la pregunta real, digamos que tengo una colección de URL de imágenes en un controlador de aplicación.Supongamos que el contenido contendrá una lista de URL válidas para imágenes reales.

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

¿Cómo vinculo el src de cada imagen a la URL actual sin anidar otra {{view}} en #each?He probado muchas combinaciones, pero no he podido identificar las fijaciones correctas.

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

El script del manillar anterior generará un error, pero creo que es la mejor manera de comunicar lo que estoy tratando de hacer.

Gracias de antemano por cualquier ayuda.

EDITAR:Después de investigar un poco más, encontré este problema. aquí.Aparentemente, srcBinding a una cadena era un error en ember-0.9.4 y se solucionó en ember-0.9.5.Terminé volviendo a algo como...

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>

para poder tener un controlador de clics en mi vista.También modifiqué el complemento para apuntar también a imágenes dentro de divs dentro de #foo.

Gracias por todas las respuestas.

Answer 1

Parece que quieres:

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

¿Eso le funciona?

Answer 2

Deberías usar srcBinding en tu {{view ... }}.Ver ejemplo: http://jsfiddle.net/M2S3Z/

Si solo desea renderizar una imagen y no necesita un archivo específico Ember.View que rinde el img etiqueta, usaría la respuesta de ebryn.

Plantilla:

<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

Preferiría usar algo que aproveche el poder de las vistas de Ember como este:

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