ember.js - ember - Establezca atributos de datos personalizados en la etiqueta{{#linkTo}} helper<a>

ember input onchange

Question

¿Cómo puedo configurar un atributo de data- personalizado en el ayudante {{#linkTo}} ? Quiero usar esto:

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

y el resultado debería verse así:

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

pero parece que

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

¿Cómo puedo hacer esto?

Answer 1

@intuitivepixel

Gracias

U ayudó mucho. Con esa información he jugado con el LinkView y pude encontrar una solución genérica:

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

Answer 2

Una forma de hacer esto es extender su Ember.LinkComponent para conocer el nuevo atributo:

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

Y luego puede usarlo en su ayudante {{#link-to}} :

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

Esto resultará en:

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

Y dado que attributeBindings es una matriz, puedes poner múltiples atributos allí que podrías necesitar:

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

Espero eso ayude.