把手模板和動態畫面

在我的模板，我做這樣的事情把手模板和動態畫面

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

的圖像加載正確，但我得到這樣的警告：

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

是有辦法解決這一問題？

來源

2012-09-21 swallace

在您的模板引擎解析模板之前，模板是否附加到頁面上？如果是這樣，我沒有看到任何解決方法。 –

我不這麼認爲。我正在做一個調用我的外部句柄模板的ajax調用。我緩存這些模板，後來我有一個函數，它接受json數據並找到適當的模板作爲源，然後編譯源代碼並將json數據傳遞給編譯後的模板。有什麼關於這種方法會導致這些警告？ – swallace

那很奇怪。那麼，當你用源創建一個圖像元素時，瀏覽器會發出一個請求來嘗試緩存它。如果模板被解析爲一個字符串，然後解析成不應該發生的DOM元素。但無論如何，您可以忽略這種警告，只是通知您沒有找到請求的文件（在交換源代碼並再次加載之前，這是正確的），但常規最終用戶在瀏覽時沒有打開其控制檯您的網站。 '=]' –

你有兩個問題：

你在你的<img>缺少右引號，但是，這不是什麼大不了的事。
您的模板正在存儲在隱藏的<div>或包含HTML的類似元素中。

如果你這樣說：

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

的瀏覽器會解釋<img>作爲一個真正的圖像，並嘗試加載在src屬性所指定的資源，這就是你的404：

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

來自。模板很少有效且格式正確，因此您需要避免瀏覽器嘗試將模板解釋爲HTML。通常的做法是在一個<script>模板存儲與非HTML type：

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

那麼你可以說Handlebars.compile($('#t').html())讓你的編譯模板和瀏覽器不會嘗試解釋#t內容爲HTML。

來源

2012-09-21 17:17:01

謝謝你解決了我的警告。 – swallace

我知道已經晚了，但這裏是如何做你想要的：

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>

來源

2012-11-28 18:04:58

我發現，使用三重括號將正常工作。

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

來源

2017-11-27 02:58:49 Kyriediculous

這個問題在5年前在2012年提出。你確定這個新答案適用於2012版handebars.js嗎？ – sisve

把手模板和動態畫面

回答

相關問題