EmberJs 模型输出到车把模板中的 img 标签答案

【问题标题】：EmberJs model output into an img tag in a handlebar templateEmberJs 模型输出到车把模板中的 img 标签
【发布时间】：2014-02-10 22:42:12
【问题描述】：

我正在尝试结合 Laravel 4 学习 EmberJs，以创建博客。事情进展顺利，事情还没有太难。但是当我试图在我的一个车把模板中添加<img/> 标签时遇到了麻烦。

根据我的理解，在模板中使用来自模型的信息，您使用 {{attribute_name}}，就像魔术一样，它就在那里！所以对于我的标签，我尝试了类似的东西：

<img src="{{URL::asset('images/posts/')}}@{{id}}.@{{image_extension}}" }}" alt=""/>

使用 Laravel 和 Blade 将 url 添加到图像中，然后在模板上，只需添加最后的小部分以使其全部工作。但我得到了这个：

<img src="http://localhost/blog/images/posts&lt;script id='metamorph-11-start' type='text/x-placeholder'&gt;&lt;/script&gt;26&lt;script id='metamorph-11-end' type='text/x-placeholder'&gt;&lt;/script&gt;.&lt;script id='metamorph-12-start' type='text/x-placeholder'&gt;&lt;/script&gt;jpg&lt;script id='metamorph-12-end' type='text/x-placeholder'&gt;&lt;/script&gt;" alt="">

显然我的 src 标签中有脚本标签，这会导致一些问题。

然后，经过大量研究，我发现了{{unbound attribute_name}} 并想出了：

<img src="{{URL::asset('images/posts')}}/@{{unbound id}}.@{{unbound image_extension}}" alt=""/>

虽然这适用于我单击的第一篇博客文章，但在我切换文章时它不会切换图像。那么有没有办法让这个人工作呢？我的想法不多了！您可以在这方面提供的任何信息都会很棒！到目前为止，我真的很喜欢 ember，并希望变得更好！如果您需要更多信息，请告诉他们，我将编辑此问题！非常感谢！

编辑：根据@buruzaemon 的建议，我尝试了

<img src="{{URL::asset('images/posts')}}/@{{bind-attr src=id}}.@{{bind-attr src=image_extension}}" alt="Post image"/>

感觉它在正确的道路上，但并不完全在那里。还有什么建议吗？

【问题讨论】：

标签： image ember.js laravel-4 handlebars.js

【解决方案1】：

也许你应该看看 Ember.js 中的bind_attr。它将允许您使用可以在控制器中设置的值正确设置 src 属性。

【讨论】：

我看到我可以添加它，但这不会从 Laravel 的 {{URL::asset('images/posts/')}} 中删除值吗？与 localhost/foo/images/image.png?
实际上，我想你会尝试类似<img {{bind_attr src=imgUrl}} > 的东西。是否可以在控制器中计算 src 属性的字符串值？
问题是，我将文件名和扩展名分开。文件名是帖子的id，扩展名是分开的，所以我有两个不同的属性需要一起工作。
Ember 中的控制器处理显示的属性或逻辑，但不需要与模型一起保存到服务器。如果 id 和 image_extension 值在模板的上下文中，那么您应该能够使用相关的 Ember 控制器作为属性构造 src 属性的字符串，然后使用 {{bind_attr src=...}} 调用它.
id 和图片扩展，都通过 ajax 加载到模型中。