javascript - Ember : how to convert anchor tag with href to link-to?

Question

在我们的 ember 应用程序中，我有一些奇怪的要求。

我从 API 收到一条消息，其中包含指向同一应用程序中其他页面的链接。

例如:“优惠/1/结账”

收到的消息是:

"Thanks for the reply. <a href='offers/1/checkout'>Click here</a> to proceed further"

现在，当我们使用上述消息时，将其显示在模板中，当用户单击单击此处链接时，整个应用程序将重新加载。

有什么方法可以阻止应用程序的重新加载吗？或者我们可以使用 link-to 帮助器将简单的 href 转换为链接吗？

谢谢

Answer 1

非常感谢@ember-sherpa。从他上面给出的引用文献来看https://github.com/intercom/ember-href-to/blob/master/addon/helpers/href-to.js#L14-L37

我添加了一个组件，如下app/components/href-to-link.js

// Manually added anchor tags causes whole app to reload.
// This component will treat anchor tag as link-to links.
// Ex: <a href="/offers/1/plan_delivery"></a> will be trated as route "offers.plan_delivery"

import Ember from 'ember';

export default Ember.Component.extend({

  _getNormalisedRootUrl: function(router) {
    var rootURL = router.rootURL;
    if(rootURL.charAt(rootURL.length - 1) !== '/') {
      rootURL = rootURL + '/';
    }
    return rootURL;
  },

  didInsertElement() {
    var _this = this;
    var router = this.container.lookup("router:main");

    Ember.$().ready(function (){
      Ember.$(".received_message, .my_message").on('click', 'a', function(e) {
        var $target = Ember.$(e.currentTarget);
        var handleClick = (e.which === 1 && !e.ctrlKey && !e.metaKey);

        if(handleClick && !$target.hasClass('ember-view') && Ember.isNone($target.attr('data-ember-action'))) {

          var rootURL = _this._getNormalisedRootUrl(router);
          var url = $target.attr('href');

          if(url && url.indexOf(rootURL) === 0) {
            url = url.substr(rootURL.length - 1);

            if(router.router.recognizer.recognize(url)) {
              router.handleURL(url);
              router.router.updateURL(url);
              return false;
            }
          }
        }
        return true;
      });
    });
  }

});

将其用作:

{{#href-to-link}}
  ...
{{/href-to-link}}

这工作得很好!!希望这对其他人也有帮助:)