方法＃2

Question

Ember.LinkView，车把{{linkTo}}助手背后的视图类现在在Ember 1.0 RC2中公开。我想扩展它，这样我就可以创建一个自定义视图，而无需为linkTo添加额外的嵌套标记。

例如：

App.MyLinkView = Ember.LinkView.extend({
    namedRoute: 'another'
});

然后

{{#view App.MyLinkView}}LinkView to another route{{/view}}

在没有太多运气的情况下看了一下源，因为它经常抛出一个错误。这是一个标准{{linkTo}}工作的jsfiddle，并且LinkView尝试注释掉，所以它不会抛出错误。

http://jsfiddle.net/HgmEy/1/

修改

以下是您想要执行此操作的更为现实的示例： http://jsfiddle.net/HgmEy/3/

所需的功能在这里使用常规视图，但是首选使用LinkView以避免额外的dom元素。

Answer 1

LinkView旨在通过帮助程序创建，该帮助程序传递（并提供默认值）某些选项。

尝试确定自定义类是否为active时，会发生错误。您需要执行以下操作之一

在使用App.MyLinkView
覆盖active功能并实现您需要的功能
只需将选项传递给{{linkTo}}即可获得您想要的行为
重新打开Ember.LinkView以提供您想要的应用程序范围的行为

Answer 2

我需要这样做才能覆盖Ember.LinkView对transitionTo的调用，以便为转换之间的jQuery动画提供解决方案。在我看来，有几种可行的方法来覆盖LinkView。我成功的第二个是Trek的最后选择，而且更简单。这是方法＃2：

方法＃2

{{#linkTo 'items' this eventName="myEvent"}} Link to {{title}} {{/linkTo}}

现在重写应用程序范围的LinkView：

Ember.LinkView.reopen({
  // this handler is still called on click, but
  // if we specify eventName in our template,
  // we can call that handler only when we need to,
  // or not at all
  click: function (e) {
    var evtName = this.get('eventName');

    // transitionTo was already invoked by
    // this._invoke() if evtName was `click`
    if (evtName === 'click') return;

    e.preventDefault();

    // do some stuff here

    var args = [].slice.call(arguments);
    this.trigger.apply(this, [evtName].concat(args));
  }
});

方法＃1

我想出的第一个方法是扩展Ember.LinkView并创建一个自定义Handlebars助手。 Ember源在这里非常方便阅读，但我必须覆盖一个私有方法，所以我不认为这是非常理想的。这是实施。请记住，我试图控制View触发transitionTo：

的时间

{{#appLinkTo 'items' this}} Link to {{title}} {{/appLinkTo}}

现在编码了！

App.LinkView = Ember.LinkView.extend({
  // always called after this.invoke(),
  // which calls transitionTo
  click: function (e) {
    e.preventDefault();
  },

  // already bound to the click event by this.init().
  // our click handler above always gets called after this one
  _invoke: function (event) {
    // we need to simulate the old _invoke if we
    // want to override its call to transitionTo
    // 
    // https://github.com/emberjs/ember.js/blob/v1.0.0/packages/ember-routing/lib/helpers/link_to.js#L297
    var isSimpleClick = Ember.ViewUtils.isSimpleClick;
    if (!isSimpleClick(event)) { return true; }
    event.preventDefault();
    if (this.bubbles === false) { event.stopPropagation(); }
    if (this.get('_isDisabled')) { return false; }

    if (this.get('loading')) {
      Ember.Logger.warn("This link-to is in an inactive loading state because at least one of its parameters presently has a null/undefined value, or the provided route name is invalid.");
      return false;
    }

    // now we can start messing around
    var routeArgs = this.get('routeArgs');
    // routeArgs seems to have format ['routeName', models for dynamic segments]
    this.set('routeArgs', ['group', routeArgs[1]]);

    // if we use:
    this.get('controller').send('someAction', routeArgs);

    // the controller can do in its `someAction` handler:
    // `this.transitionToRoute.apply(this, routeArgs);`
  }
});

// besides the naming, this is verbatim from the end of:
// https://github.com/emberjs/ember.js/blob/v1.0.0/packages/ember-routing/lib/helpers/link_to.js
Ember.Handlebars.registerHelper('app-link-to', function(name) {
    var options = [].slice.call(arguments, -1)[0],
        params = [].slice.call(arguments, 0, -1),
        hash = options.hash;

    hash.disabledBinding = hash.disabledWhen;
    hash.parameters = {
      context: this,
      options: options,
      params: params
    };

    return Ember.Handlebars.helpers.view.call(this, App.LinkView, options);
});

Ember.Handlebars.registerHelper('appLinkTo', Ember.Handlebars.helpers['app-link-to']);

方法＃3

如果您想要两者兼顾，可以将两种方法结合起来并扩展Ember.LinkView，创建自定义Handlebars助手，并使用自定义事件名称来表示您要采取的操作。这样，无需覆盖Ember.LinkView和覆盖_invoke。

祝你好运！

扩展Ember LinkView

2 个答案:

方法＃2

方法＃1

方法＃3