助手中的Ember.js動態內容

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文件
灰燼源代碼

這是代碼文檔的內容

選項示例

像普通的車把助手一樣，綁定的助手也可以訪問傳遞到助手調用中的選項。

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}} 。 如果任何屬性更改，則助手將重新渲染。 請注意，依賴項鍵不能與多屬性助手一起使用，因為依賴項鍵屬於哪個屬性是模棱兩可的。

這是工作的jsbin示例