Задайте настраиваемые атрибуты данных в {{#linkTo}} вспомогательном теге

Как установить пользовательский атрибут data- в помощнике {{#linkTo}}? Я хочу использовать это:

{{#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>

Как я могу это сделать?

Ответ 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']

Надеюсь, что это поможет.

Ответ 2

@intuitivepixel

Спасибо

U очень помог. С помощью этой информации я играл на арсенале с LinkView и смог найти общее решение:

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