Question

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

...
<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);
});

我该怎么办？

Answer 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}}等模板语法 {{1}}。如果任何属性发生变化，帮助者将重新渲染。请注意，依赖键不能与多属性助手一起使用，因为它不明确依赖键属于哪个属性。

以下是working jsbin作为示例

Ember.js内部帮助器的动态内容

1 个答案:

以下是代码文档

带选项的示例