Festlegen benutzerdefinierter Datenattribute für {{#linkTo}} helper <a> tag

Question

Wie kann ich benutzerdefinierte data- Attribut auf dem {{#linkTo}} Helfer? Ich möchte diese verwenden:

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

und das Ergebnis sollte wie folgt aussehen:

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

aber es sieht aus wie:

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

Wie kann ich das tun?

Answer 1

Ein Weg, dies zu tun könnte, ist Ihre Ember.LinkView zu erweitern bewusst das neue Attribut zu sein:

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

Und dann können Sie es in Ihrem {{#link-to}} Helfer verwenden:

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

Dieser Wille Ergebnis in:

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

Und seit attributeBindings i s ein Array Sie können mehrere Attribute dort setzen, die Sie benötigen könnten:

Ich hoffe, es hilft.

Answer 2

@intuitivepixel

Dank

U sehr geholfen. Mit dieser Information habe ich mit dem LinkView herumgespielt und konnte eine generische Lösung finden:

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