javascript - Ember.js 中带有普通 anchor 标记的动态 linkTo

Question

export default Ember.Component.extend({
  tagName: '',

  actions: {
    checkUrl(post) {
      if(!Ember.get(post, 'property')) {
        event.preventDefault();
        // show modal dialog
      }
    }
  }
});

<a href="{{post.otherUrl}}" {{action 'checkUrl' post preventDefault=false}}>URL</a>

上述组件生成一个打开“otherUrl”的链接。如果帖子对象不包含“otherUrl”，我将显示一个模式对话框

对话框模板(不同组件)

<p>No Link Found. Go to <a class="post-link">post</a> and add otherUrl</p>

我想每次将“post-link” anchor 标记指向不同的“post”路线，例如“post/1”、“post/2”等，基于用户首先点击的帖子。我应该为此重新编译或重新呈现模式对话框模板吗？实现此目的的一种方法是操作 DOM 并根据用户点击后的“后链接”添加 href。但生成的链接将触发整个页面加载而不是路由。有人可以指导我如何实现这一目标

Answer 1

不要链接到可能无效的 URL 并阻止转换(如果无效)，只需渲染不同的 anchor 标记:

{{#unless post.property}}
  <a href={{post.otherUrl}}>URL</a>
{{else}}
  <a href="#" {{action 'showModal' post}}>URL</a>
{{/unless}}

让 showModal 操作冒泡到呈现模态的 Controller (或者更好的是，从中传递闭包操作)。将传递的 post 设置为该 Controller 上的属性，并将该属性传递给要呈现的模式组件。如果您无法从模式直接链接到帖子，则可以执行另一个操作来关闭模式和转换。像这样的事情:

// app/controllers/posts.js
export default Ember.Controller.extend({
  selectedPost: null,

  actions: {
    showModal(post) {
      this.set('selectedPost', post);
      // TODO: show the modal
    },

    editPost(post) {
      // TODO: hide the modal
      this.transitionToRoute('post', post);
    }
  }
});

// app/templates/posts.hbs
{{#modal-dialog}}
  <p>No Link Found. Go to <a href="#" {{action 'editPost' selectedPost}} class="post-link">post</a> and add otherUrl</p>
{{/modal-dialog}}