ember:如何将锚标签与href转换为链接到?

时间:2016-02-08 12:42:55

标签: javascript ember.js ember-cli

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

从api,我收到的消息已链接到同一应用程序中的某个其他页面。

例如:“offer / 1 / checkout”

我收到的信息是:

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

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

有没有办法阻止重新加载应用?或者我们可以使用 link-to 帮助将简单的 href 转换为链接吗?

谢谢

1 个答案:

答案 0 :(得分:0)

非常感谢@ 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}}

这很好用!! 希望这也有助于其他人:)