Ember.js Bindung ohne Ansicht

Question

Entschuldigung Wenn so etwas bereits gefragt wurde, ich aber nicht genau das finde, wonach ich suche. Ich möchte die Frage vorwegnehmen, indem ich sage, dass ich das Gefühl habe, ein anständiges Verständnis für Inhaltsbindungen zu haben. Ich plane die Verwendung eines JQuery-Karussell-Plugins eines Drittanbieters, das eine Liste von IMG-Tags in einem Div benötigt, um ordnungsgemäß zu funktionieren. Angenommen, ich habe eine Sammlung von URLs zu Bildern in einem App-Controller. Angenommen, der Inhalt enthält eine Liste gültiger URLs zu tatsächlichen Bildern.

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

Wie binde ich den src jedes Bildes an die aktuelle URL, ohne ein weiteres {{view}} in #each zu verschachteln? Ich habe viele Kombinationen ausprobiert, konnte aber nicht die richtigen Bindungen festlegen.

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

Das obige Lenkerskript wird fehlerhaft angezeigt, aber ich denke, es ist der beste Grund, warum ich kommunizieren kann, was ich versuche.

Vielen Dank im Voraus für jede Hilfe.

BEARBEITEN: Nach einigen weiteren Recherchen bin ich auf dieses Problem hier gestoßen. Anscheinend war srcBinding an einen String ein Fehler in ember-0.9.4 und wurde in ember-0.9.5 behoben. Am Ende ging ich zurück zu etwas wie ...

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>

damit ich einen Klick-Handler in meiner Ansicht haben kann. Ich habe das Plugin auch so geändert, dass es auch Bilder innerhalb von Divs innerhalb von #foo als Ziel hat.

Danke für alle Antworten.

Answer 1

Anscheinend möchten Sie:

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

Funktioniert das bei Ihnen?

Answer 2

Sie sollten srcBinding für Ihren {{view ... }} verwenden.Siehe Beispiel: http://jsfiddle.net/M2S3Z/

Wenn Sie nur ein Bild rendern möchten und keinen bestimmten Ember.View benötigen, der das img-Tag rendert, würde ich die Antwort von ebryn verwenden.

Vorlage:

<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

Ich würde lieber etwas nutzen, das die Kraft von Ember-Ansichten wie diesen nutzt:

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