Question

如何在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>

我该怎么做？

Answer 1

您可以这样做的方法是扩展您的Ember.LinkComponent以了解新属性：

Ember.LinkComponent.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

由于

你帮了很多忙。有了这些信息，我就使用了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);
            }
        });
    }
});

在{{#linkTo}}帮助<a> tag</a>上设置自定义数据属性

2 个答案: