帮助程序包含在脚本标记中

时间:2013-10-22 05:55:47

标签: ember.js handlebars.js

这个问题必须非常容易回答,尽管我被困了......

  • ember 1.0.0
  • 车把1.0.0

我定义了以下(简化)帮助器来生成URL:

Ember.Handlebars.helper('imageUrl', function(basename) {
  return 'http://lorempixel.com/400/200/' + basename;
});

从模板中调用此帮助程序:

<ul>
  {{#each}}
    <li><img src={{imageUrl name}}></li>
  {{/each}}
</ul>

将输出包装在脚本标记中,而不是输出预期的URL:

...
<li>
  <img src="<script" id="metamorph-6-start" type="text/x-placeholder">
  http://lorempixel.com/400/200/sport
  <script id="metamorph-6-end" type="text/x-placeholder"></script>&gt;

我不希望这个属性成为我模型的一部分,所以我通过用控制器表示每个项目并在此控制器中定义了imageUrl来解决这个问题。但这感觉太复杂了:

<ul>
  {{#each itemController="myItem"}}
    <li><img {{bind-attr src=imageUrl}}></li>
  {{/each}}
</ul>


App.MyItemController = Em.ObjectController.extend({
  imageUrl: function(){
    return 'http://lorempixel.com/400/200/' + this.get('name');
  }.property('name');
});

我如何使用助手来完成此任务?

1 个答案:

答案 0 :(得分:1)

我认为你可以使用无助的帮手

<ul>
  {{#each}}
    <li><img src={{unbound imageUrl name}}></li>
  {{/each}}
</ul>

来自github https://github.com/emberjs/ember.js/pull/1817

中的合并公关
Helpers declared as bound can be invoked by their unbound former via the unbound helper: {{unbound foo prop1 prop2}}