ヘルパーのカスタムデータ属性を設定する<a>タグ

Question

{{#linkTo}}ヘルパーでカスタムdata-属性を設定するにはどうすればよいですか？私はこれを使用したい：

{{#linkTo "foo" data-toggle="dropdown"}}foo{{/linkTo}} 

をし、その結果を次のようになります。

<a id="ember323" class="ember-view active" data-toggle="dropdown" href="#/foo/123">foo</a> 

が、それは次のようになります。

<a id="ember323" class="ember-view active" href="#/foo/123">foo</a> 

私はこれをどのように行うことができますか？あなたがこれを行うことができます

Answer 1

方法は、新しい属性を認識するためにあなたのEmber.LinkViewを拡張することです：

Ember.LinkView.reopen({ 
    attributeBindings: ['data-toggle'] 
}); 

そして、あなたはあなたの{{#link-to}}ヘルパーでそれを使用することができます。

{{#link-to 'foo' data-toggle="dropdown"}}Foo{{/link-to}} 

この意志結果：

<a id="ember262" class="ember-view active" href="#/foo" data-toggle="dropdown">Foo</a> 

attributeBindings以降あなたが必要とするかもしれない複数の属性を置くことができる配列です。

attributeBindings: ['data-toggle', 'foo', 'bar'] 

希望します。

Answer 2

@intuitivepixel

おかげ

Uはたくさん助け。その情報を使って、私はLinkViewでarroundを再生し、汎用ソリューションを見つけることができました：

Em.LinkView.reopen({ 
    init: function() { 
     this._super(); 
     var self = this; 
     Em.keys(this).forEach(function(key) { 
      if (key.substr(0, 5) === 'data-') { 
       self.get('attributeBindings').pushObject(key); 
      } 
     }); 
    } 
});