2012-09-21 17 views
8

In meinen Vorlagen Ich tue so etwas wieLenker Templating und dynamische Bilder

<img class="someClass" src="{{imgURL}}"> 

Die Bilder werden korrekt geladen, aber ich erhalte Warnungen wie:

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found) 

Gibt es eine Möglichkeit, dies zu beheben?

+0

Wird die Vorlage an die Seite angehängt, bevor sie von Ihrer Templating-Engine analysiert wird? Wenn ja, sehe ich keine Problemumgehung. –

+0

Ich glaube nicht. Ich mache einen Ajax-Anruf, der meine externen Lenkervorlagen erfasst. Ich cache diese Vorlagen und später habe ich eine Funktion, die die JSON-Daten und findet die richtige Vorlage als Quelle verwenden und dann kompiliere ich die Quelle und übergebe die JSON-Daten an diese kompilierte Vorlage. Gibt es etwas an dieser Methode, das diese Warnungen verursacht? – swallace

+0

Das ist dann komisch. Nun, wenn Sie ein Image-Element mit der Quelle erstellen, wird der Browser eine Anfrage stellen, um zu versuchen, es bereits zu cachen. Wenn die Vorlage als String analysiert wird, dann wird sie in DOM-Elemente geparst, die nicht passieren sollten. Wie auch immer, Sie können diese Art von Warnung ignorieren, nur um Sie darüber zu informieren, dass eine angeforderte Datei nicht gefunden wurde (das ist direkt bevor Sie die Quelle austauschen und sie erneut lädt), normale Endbenutzer haben ihre Konsolen beim Browsen nicht geöffnet deine Seite. '=]' –

Antwort

10

Sie haben zwei Probleme:

  1. Sie einen Schlusskurs in Ihrem <img> fehlt aber das ist keine große Sache.
  2. Ihre Vorlage wird in einem versteckten <div> oder ähnlichen Element gespeichert, das HTML enthält.

Wenn Sie sagen, dass dies:

<div id="t" style="display: none"> 
    <img class="someClass" src="{{imgURL}}"> 
</div> 

der Browser die <img> als reelles Bild interpretieren und versuchen, die Ressource in dem src Attribute angegeben zu laden, das ist, wo Ihr 404:

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found) 

kommt von. Vorlagen sind selten gültig und korrekt formatiert. Daher müssen Sie den Browser davon abhalten, Vorlagen als HTML zu interpretieren. Die übliche Vorgehensweise ist die Vorlage zu speichern, in einem <script> mit einer Nicht-HTML type:

<script id="t" type="text/x-handlebars-template"> 
    <img class="someClass" src="{{imgURL}}"> 
</script> 

Dann können Sie sagen Handlebars.compile($('#t').html()) kompilierten Vorlage zu erhalten, und der Browser wird nicht versuchen, den #t Inhalt als HTML zu interpretieren.

+0

Danke dies meine Warnung behoben. – swallace

3

Ich weiß, es ist spät, aber hier ist, wie zu tun, was Sie wollen:

var view = Ember.View.create({templateName: 'myTemplate', myPicture: 'http://url_of_my_picture.png'}); 

view.appendTo('#myDiv'); 

<script type="text/x-handlebars" data-template-name="myTemplate"> 
    <img {{bindAttr src="myPicture"}}> 
</script> 
0

Ich fand, dass Triple-Klammern mit feinen arbeiten.

<img src="{{{your source}}}" alt={{{your alt}}} /> 
+0

Die Frage wurde 2012 vor über 5 Jahren gestellt. Sind Sie sicher, dass diese neue Antwort auf die 2012 Version von handebars.js anwendbar ist? – sisve