2014-09-04 46 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流星文档。)

相关问题