我正在使用 Handlebars 助手来解析一组对象,并且我希望将返回的结果包装在 #linkTo 调用中,以便 Embers 路由器能够拾取它。
这是我在 View 中调用它的方式:
{{buildBreadcrumb my_objects}}
这是我的助手的样子:
Ember.Handlebars.registerHelper 'buildBreadcrumb', (val, opts) ->
value = Ember.get(this, val)
out = ""
value.forEach (group, index) =>
if value.length - index == 2
out += '{{#linkTo group ' + group.name + '}}'
if value.length - index == 1
out += '{{#linkTo group ' + group.name + '}}'
out
出于显而易见的原因,上面只是将 {{#linkTo ...}}
解析为文字字符串。有什么方法可以按照我想要的方式解析它吗?我很清楚我可以在 View 本身中使用 {{#each}} 等 - 但由于我的用例,我必须使用助手来构建它。有什么建议吗?
最佳答案
您可以编写自定义 Handlebars View 助手。该 View 可以封装 #each
逻辑,而最终的帮助器看起来与这里的大部分相似。使用上的唯一区别是必须将参数作为属性传递给 View 助手。
创建这个助手的方法是传入View类而不是助手函数。
App.BreadcrumbView = Ember.View.extend({
templateName: 'breadcrumb',
penultimate: function() {
var length = this.get('items').length;
return this.get('items')[length - 2];
}.property('items'),
last: function() {
var length = this.get('items').length;
return this.get('items')[length - 1];
}.property('items')
});
Ember.Handlebars.helper('breadcrumb', App.BreadcrumbView);
以及相应的模板,
<script type='text/x-handlebars' data-template-name='breadcrumb'>
<ul class="breadcrumb">
{{#each item in view.items}}
<li>{{#linkTo 'group' item}}{{item.id}}{{/linkTo}} »
</li>
{{/each}}
</ul>
</script>
要使用应用程序中的帮助程序,
<script type='text/x-handlebars' data-template-name='breadcrumb'>
<ul class="breadcrumb">
<li>{{#linkTo 'group' view.penultimate}}{{view.penultimate.id}}{{/linkTo}} »</li>
<li>{{#linkTo 'group' view.last}}{{view.last.id}}{{/linkTo}}</li>
</ul>
</script>
这种方法的一个好处是绑定(bind)会自动连接,因此更改项目数据将自动更新面包屑 View ,从而保留内部变形。
这是一个jsbin示例。
关于ember.js - 在自定义 Handlebars 助手中使用 linkTo,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17386954/