把手模板和动态画面

在我的模板，我做这样的事情把手模板和动态画面

<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

把手模板和动态画面

回答

相关问题