2014-09-04 21 views
1
{{#each posts}} 
    {{> post}} 
{{else}} 
    loader.gif 
{{\each}} 

我發現eachelse意外,似乎它的工作相當不錯(至少在我的本地)。我想要的是當流星仍然從數據庫中檢索posts時顯示一個加載器。它做這個工作嗎? each中的else有哪些注意事項?每個人都是放置加載圖像的好地方嗎?

+0

「看來它的工作相當出色「......」它做這個工作嗎?「我沒有明白:/ – Lucio 2014-09-04 03:08:31

+0

從來沒有聽說過'#each ... else'塊,但是如果它工作的話,在'else'部分加載一個加載微調器是一個很好的設計模式恕我直言。 – saimeunt 2014-09-04 03:16:32

回答

1

首先,要回答你的問題...

是的,這將很好地工作正是你正在嘗試做什麼。

否則是一個特殊的塊幫手

從文檔的車把一個非官方的來源,從中spacebars /火焰/未來的東西在吸引它的靈感。

{{else}} ...可與任何塊輔助被用來表示應該是什麼輸出如果給定表達式的計算結果爲falsy值。

所以,真的,這不要緊,你選擇哪幫手,不管你是使用#if#each#with,等...行爲基本上是相同的。

也就是說,如果您的參數(在此例中爲posts)的計算結果爲falsy value,則此後將對其進行評估。

這些警告...

真的沒有任何警告,但約falsy值的棘手的事情是空數組實際上truthy。所以,舉個例子,如果posts被定義爲,但是爲空,它仍然會評估第一個塊,給你一個空的輸出。這對你來說是理想的,因爲你想在加載塊被定義之前顯示它。不過,我可以很容易地看到有人解決做到以下幾點:

{{#each posts}} 
    {{content}} 
{{else}} 
    There are no posts today. 
{{/each}} 

你空posts陣列將評估爲true,你絕不會看到缺少的帖子消息的。然而,由於0評估爲假,你可以在一個#if幫手換塊:

{{#if posts.length}} 
    {{#each posts}} 
     {{content}} 
    {{else}} 
     {{>spinner}} 
    {{/each}} 
{{else}} 
    Sorry, there are no posts today. 
{{/if}} 

來源: http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers

+0

-1這個答案對於把手來說可能是正確的,但是在Spacebars中,當對象是空的時候仍然會出現'{{else}}',但是truthy(對於列表和遊標)。看到這個meteorpad:http://meteorpad.com/pad/SiG6XCujLb92F6NLG – user3374348 2014-09-04 08:03:09

1

我不認爲這是一個好主意。

{{else}}{{#each cursor}}塊助手出現cursor爲空時。當光標後面的訂閱尚未準備就緒時,您想要顯示加載微調器。這些不一樣,至少有兩種情況:

1.遊標中實際上沒有任何帖子。例如,用戶搜索了一些帖子,沒有發佈與搜索相匹配的帖子,或者該應用剛上線,並且根本沒有任何帖子。在這種情況下,用戶將永遠看到加載微調器,並假設你的應用程序已損壞。

這是一個好主意,把在{{else}}一些消息的,所以用戶不會得到一個空列表困惑:

{{#each posts}} 
    {{> post}} 
{{else}} 
    There are no posts. 
{{/each}} 

2.客戶端已經收到一些員額從服務器,但不是全部。您想要顯示微調框,直到所有帖子都已到達,但在執行{{else}}時,只要有一個帖子到達,微調框就會消失。當其他帖子到達時,您會看到它們在到達時出現,這可能會引起震動。由於低延遲,很可能你不會看到這種情況發生,但在生產中,它更有可能。

正確的方法是使用訂閱句柄的反應ready方法:

{{#if postsReady}} 
    {{#each posts}} 
    {{> post}} 
    {{else}} 
    There are no posts. 
    {{/each}} 
{{else}} 
    loader.gif 
{{/if}} 
// Somewhere in your code, something like this: 
var postsSubscription = Meteor.subscribe(/* ... */); 

// Top level: 
Template.posts.helpers({ 
    postsReady: function() { return postsSubscription.ready(); }, 
    posts: function() { return Posts.find(); } 
}); 

你也應該考慮使用iron:router,其中有一個偉大的方式來處理使用waitOn等待訂閱。

(如果你以前從未見過Meteor.subscribe,你可能使用autopublish,這是不適合於實時應用。檢查出publish and subscribe流星文檔。)

相關問題