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

时间:2014-04-01 07:59:35

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

我有这个模板,其中包含一系列来自其视图的属性。对于所有这些属性,我需要检查它们是否为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);
});

我该怎么办?

1 个答案:

答案 0 :(得分:3)

为了使绑定有效,您需要使用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作为示例