動態linkTo帶有Ember.js中的普通錨點標記

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'。如果POST對象不包含「otherUrl」我會表演一個模式對話框動態linkTo帶有Ember.js中的普通錨點標記

對話框模板（不同成分）

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

我想將「鏈接後」錨標記指向不同的'post'路線，每次像'post/1'，'post/2'等等，都是基於首先點擊的帖子用戶。我應該重新編譯還是重新渲染模態對話框模板。一種方法可以操作DOM，併爲該「後鏈接」添加href，從而實現後期用戶點擊。但生成的鏈接將觸發整頁加載而不是路由。可能有人指導我如何實現這一目標

來源

2017-06-13 Lokesh Cherukuri

而是鏈接到可能無效的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}}

來源

2017-06-13 21:12:48 mwp

動態linkTo帶有Ember.js中的普通錨點標記

回答

相關問題