2014-02-06 46 views
0

我創建了帖子頁面的左半邊和右隱藏顯示容器中可見的列表流星應用。用戶點擊帖子標題,顯示容器變爲頁面右側並顯示完整帖子。現在,顯示完整帖子的容器最初是隱藏的,只是其元素用手柄表達式填充。如果您點擊另一篇文章,同一個展示容器將保持打開狀態,但其內容已更改。上後重新渲染一個隱藏的元素

點擊

Template.postsList.events({ 
    'click .post': function (e, template) { 
     e.preventDefault(); 
     Session.set('selectedPost', this._id); 
    } 
}); 

例車把表達

Template.postDisplay.title = function() { 
    return Posts.findOne(Session.get('selectedPost')).title 
} 

一切正常和良好,除了顯示容器的反應性質。如果數據庫中的某些內容發生變化(無論是增加的註釋,標題中的變化等),顯示屏會再次隱藏,我必須重新點擊該文章。 postsList模板的所有值都正常無縫地更新,沒有任何眨眼或任何事情。

有沒有辦法有顯示容器的值更新而被隱藏保持呢?

這就是我一直在顯示容器。只是經常展示和隱藏。

在原稿裝載

$('#post-display-container').hide(); 

在元件單擊postDisplay模板的

$('.title').click(function() { 
    $('#post-display-container').show() 
}); 

實施例。當然,我沒有做這件事。

<template name="postDisplay"> 
    {{#each posts}} 
    <h3 class='title'>{{title}}</h3> 
    <p class='body'>{{body}}</p> 
    {{/each}} 
</template> 

模板幫手

Template.postDisplay.helpers({ 
    posts: function() { 
     return Posts.find(Session.get('selectedPost')); 
    } 
}) 
+0

這應該很容易。顯示容器的方式可能存在錯誤。你能展示你使用的代碼嗎? –

+0

@HubertOG好吧我更新了信息。 – Nubby

回答

1

在流星文檔,在session.equal你可以看到做什麼,當你單擊所需的職位。

選擇添加到您的文章左側的類將給予線索後是當前選中的。

而在右邊,你可以只顯示基於會話以及當前選定的職位。點擊時不要嘗試顯示帖子。想想把這個帖子的一些類出現。

只是要清楚,你必須改變你的帖子顯示器看起來類似下面這樣當重新呈現類仍然在那裏,您的文章(右側)仍然會顯示。順便說一句,當頁面加載時刪除.hide(),並在單擊帖子時將行爲更改爲新的當前選定帖子。

<template name="postItem"> 
    <div class="{{postClass}}">{{title}}</div> 
</template> 

Template.postItem.postClass = function() { 
    return Session.equals("selectedPost", this._id) ? 
     "selected" : ""; 
}; 
+0

當用戶第一次到達頁面時,右側不是空白(網站品牌,其他的東西)。當用戶點擊一個帖子時,這些東西只是被掩蓋了。將刪除隱藏影響這? – Nubby

+0

@CassioSCabral「你必須改變你的帖子顯示,看起來類似於下面的內容,所以當重新渲染課程仍然在那裏,你的帖子(在右側)仍然會顯示」你能解釋一下嗎?我不確定我是否得到你。 – Nubby

+0

在你的模板帖子顯示中,你需要一個圍繞帖子的div,它將有一個可能來自助手postClass函數的「selected」類。選中的類表示帖子具有display:block,這相當於在該元素上調用.show()。當帖子被點擊時,它會改變會話中當前選擇的帖子,並重新呈現自動顯示正確的帖子。如果沒有選擇帖子,您可以在右側顯示其他內容。 – cassioscabral