帮助器内的 Ember.js 动态内容答案

【问题标题】：Ember.js dynamic content inside helper帮助器内的 Ember.js 动态内容
【发布时间】：2014-04-02 16:29:10
【问题描述】：

我有这个模板，其中包含来自其视图的一堆属性。对于所有这些属性，我需要检查它们是否为空并显示它们：

...
<div {{bind-attr class=":(foo-class) view.foo::hidden"}}>{{view.foo}}</div>
<div {{bind-attr class=":(bar-class) view.bar::hidden"}}>{{view.bar}}</div>
...

为了使模板不那么冗长，我想创建一个助手，比如说displayAttribute，它接受参数的名称并返回正确的 HTML 内容。

但是，我不知道如何构建字符串以在帮助程序中以绑定正常工作的方式返回。

Ember.Handlebars.helper('displayAttribute', function(attr, tag) {
    if (typeof(tag) === 'undefined') {
      tag = 'div';
    }

    // TODO: generate output string

    return new Handlebars.SafeString(output);
});

我应该如何进行？

【问题讨论】：

标签： ember.js handlebars.js view-helpers

【解决方案1】：

为了使绑定起作用，您需要使用Ember.Handlebars.registerBoundHelper

Ember.Handlebars.registerBoundHelper('displayAttribute', function(value,options) {
    if (typeof(tag) === 'undefined') {
      tag = 'div';
    }

    // TODO: generate output string

    return new Handlebars.SafeString(output);
}, dependentKeys);

注意它需要 3 个参数。

@param {String} name
@param {Function} function
@param {String} dependentKeys*

有关更多文档，我建议通过以下链接。

Ember API Docs
Ember Source Code

这是代码文档中的内容

选项示例

与普通车把助手一样，绑定助手可以访问选项传递给辅助调用。

Ember.Handlebars.registerBoundHelper('repeat', function(value, options) {
    var count = options.hash.count;
    var a = [];
    while(a.length < count) {
        a.push(value);
    }
    return a.join('');
  });

这个助手可以在模板中使用如下：

  {{repeat text count=3}}

## 带有绑定选项的示例

还支持绑定哈希选项。示例：

{{repeat text countBinding="numRepeats"}}

在本例中，count 将绑定到上下文中的 numRepeats 属性。如果那个属性更改，助手将被重新渲染。

## 额外依赖的例子

Ember.Handlebars.registerBoundHelper 方法采用可变长度第三个参数表示对传入值的额外依赖。这允许车把助手在这些依赖项发生变化时进行更新。

  Ember.Handlebars.registerBoundHelper('capitalizeName', function(value) {
    return value.get('name').toUpperCase();
  }, 'name');

## 具有多个绑定属性的示例

Ember.Handlebars.registerBoundHelper 支持绑定到多个属性，例如：

Ember.Handlebars.registerBoundHelper('concatenate', function() {
    var values = Array.prototype.slice.call(arguments, 0, -1);
    return values.join('||');
  });

允许使用模板语法，例如{{concatenate prop1 prop2}} 或 {{concatenate prop1 prop2 prop3}}。如果任何属性发生变化，助手将重新渲染。请注意，依赖键不能与多属性助手一起使用，因为它是模棱两可的依赖键属于哪个属性。

这里以working jsbin 为例

【讨论】：