ember: 如何将带 href 的锚标记转换为 link-to？

Question

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

我正在从 api 收到发往同一应用程序中其他页面的消息 link。

例如："offers/1/checkout"

收到的消息是：

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

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

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

谢谢

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

这很好用！！希望这对其他人也有帮助:)

ember: 如何将带 href 的锚标记转换为 link-to？

ember: how to convert anchor tag with href to link-to?

javascript

ember.js

ember-cli