Handlebars Helper基于条件逻辑将视图插入到模板中

时间:2013-02-05 06:57:09

标签: ember.js handlebars.js

我有一个迭代实体数组的模板。

我想基于某些逻辑显示某些实体的“删除”按钮,我只想了解最佳方法。

实际删除按钮将使用以下标记呈现,请注意标记包括对内置操作帮助程序的调用。:

<button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>

我想用

替换它
{{optionalRemoveEntityButton entity}}

我正在尝试创建一个无逻辑的模板,所以我想也许我可以创建一个帮助器,如:

Ember.Handlebars.registerHelper('optionalRemoveEntityButton', function(entity, options) {
  logicForDeterminingWhetherToShowView 
  removeEntityButtonView = howDoILoadAViewProgrammatically?
  return removeEntityButtonView;
});

我不明白如何以编程方式加载视图。我想使用一个视图,因为这个帮助器不只是返回一些简单的标记。它还包括对 {{action}} 助手的调用。

除非有更好的方法来实现我想要做的事情?

1 个答案:

答案 0 :(得分:1)

  

我有一个迭代实体数组的模板。我想基于某些逻辑为这些实体显示一个“删除”按钮,我只是想了解最佳方法。

这是一个非常常见的用例。这种逻辑的想法在于控制器。

  

实际删除按钮将使用以下标记呈现,请注意标记包括对内置操作助手的调用:<button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>

     

我想用{{optionalRemoveEntityButton entity}}

替换它

我建议您保留原始标记。

  

除非有更好的方法来实现我想要做的事情?

将逻辑排除在模板之外是一个很好的目标,但通常这并不意味着要构建很多把手帮手。通常,当您发现在许多视图中重复显示某些显示逻辑时,您只会构建一个帮助程序。

另一种方法是使用{{#if}}助手有条件地显示按钮

{{#if showDeleteButton}}
  <button class="btn btn-danger" {{action "removeEntityFunctionInController" entitity}}><i class="icon-remove icon-white"></i> Remove</button>
{{/if}}

您需要将ArrayController的itemController属性设置为将包装每个项目的控制器(可能是ObjectController)的名称。然后在该itemController上定义showDeleteButton方法。有关设置此内容的详细信息,请参阅Ember.ArrayController文档。