使用 Ember-cli 扩展 {{link-to}}答案

【问题标题】：Extending {{link-to}} with Ember-cli使用 Ember-cli 扩展 {{link-to}}
【发布时间】：2015-07-22 16:16:25
【问题描述】：

这个问题类似于未回答的Extending link-to。

我正在尝试扩展 {{link-to}} 帮助器以输出其他属性绑定。然而，这些属性不会出现在我们的 HTML 中。这是我们所拥有的：

//views/link-to.js (normally coffeescript)
import Ember from 'ember'

var LinkToView = Ember.LinkView.reopen({
  attributeBindings: ['data-toggle', 'data-placement', 'title']
});

export default LinkToView;

渲染的输出是这样的：

define('app/views/link-to', ['exports', 'ember'], function (exports, Ember) {

  'use strict';

  var LinkToView;

  LinkToView = Ember['default'].LinkView.reopen({
    attributeBindings: ['data-toggle', 'data-placement', 'title']
  });

  exports['default'] = LinkToView;

});

当它被调用和它的渲染输出时：

// Any .hbs file
{{#link-to 'account' 
    class='header-link' 
    data-toggle='tooltip' 
    data-placement='right' 
    title='Account'
}}
    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
{/link-to}}

// Rendered...
<a id="ember615" class="ember-view header-link" href="/account"     title="Account">             
    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>

我们哪里出错了？我知道这与解析器或我们如何称呼它有关。

谢谢。

【问题讨论】：

不确定是否可以，但您可以为此创建一个帮助程序和/或组件。如果您对这种方法感兴趣，请告诉我，我会写一个答案。
是的，我很乐意看到一些东西。谢谢
我偶然发现了这个answer，它对你有用吗？
并非如此。这在很大程度上是我已经在做的。不过我认为这个问题与 Ember-CLI 解决问题的方式有关。

标签： ember.js ember-cli

【解决方案1】：

对于 Ember 2.0+

创建文件 app/reopens/link-component.js

import Ember from 'ember'; 
Ember.LinkComponent.reopen({
  attributeBindings: ['data-variation', 'data-offset', 'data-content','data-any']
});

在 app.js 中导入

import LinkComponent from './reopens/link-component';

就是这样。对于 ember-cli

【讨论】：

那太好了，你能告诉我如何改变href，例如我想在点击任何链接时执行一些JS（打开一个标签）
非常感谢！

【解决方案2】：

所以它可能不是最正确的答案，但我偶然发现，如果你将任何类型的扩展或覆盖像这样放入 route/applaction.js 的 beforemodel 钩子中，它可以完美地工作：

// routes/application.js
export default Ember.Route.extend({
  beforeModel: function() {
    Ember.LinkView.reopen({
      attributeBindings: ['data-toggle', 'data-placement', 'title']
    });
  })
});

【讨论】：

从技术上讲，您不需要在路由的业务逻辑中执行此操作，实际上我认为这会使它更加混乱，因为您没有对模型做任何事情（我很迂腐） .

【解决方案3】：

文件：app/reopens/link-component.js

如果这可以帮助其他人获得通用数据-* Ember 2.x。

import Ember from 'ember';

Ember.LinkComponent.reopen({
    init: function() {
        this._super();
        var self = this;

        // bind attributes beginning with 'data-'
        Object.keys(this).forEach(function(key) {
            if (key.substr(0, 5) === 'data-') {
                self.get('attributeBindings').pushObject(key);
            }
        });
    },
});

【讨论】：

这不再适用于 Ember >= 2.8，因为 attributeBindings 是 Object.sealed。