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>

以上组件生成一个链接以打开＆＃39; otherUrl＆＃39;。如果帖子对象不包含＆＃39; otherUrl＆＃39;我将展示一个模态对话框

对话框模板（不同组件）

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

我想指出后期链接＆＃39;锚标记到不同的帖子＆＃39;每次路线如＆＃39; post / 1＆＃39;，＆＃39; post / 2＆＃39;等基于用户点击的帖子首先。我应该为此重新编译或重新渲染模态对话框模板。一种方法是操作DOM并为后续链接添加href。基于用户点击后。但结果链接将触发整页加载而不是路由。有人可以指导我如何实现这个

Answer 1

而不是链接到可能无效的URL并阻止转换（如果是），只需呈现不同的锚标记：

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

让showModal动作冒泡到（甚至更好，传递闭包动作）渲染模态的控制器。将传递的帖子设置为该控制器上的属性，并将该属性传递给要呈现的模式组件。如果您无法直接链接到模态的帖子，则可以使用另一个操作来关闭模态和过渡。像这样：

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

动态链接在Ember.js

1 个答案: