-1

jQuery 和流星

Meteor 是响应式的，诞生于一个只有一个初始页面加载的 Web 应用世界，jQuery 诞生于一个服务器生成页面的世界。

所以，问题是……什么时候在 Meteor 模板上调用 jQuery 插件？

1) 在页面加载时 -> 不起作用。数据还没有。

Template.contextualFeed.feedItems = ->
    Feed.find()
    $("abbr.timeago").timeago() # Calling the feed right away is useless as Feed.find() is initially empty and will populate a bit later when subscription is delivering the initial data.

<template name="contextualFeed">
    <ul class="feed {{isActive "feed"}}">
    {{#each feedItems}}
    <li class="popup-holder">
        {{> contextualFeedItem}}
    </li>
    {{/each}}
    </ul>
</template>

2) 在每个 Item-> Works 上，但似乎非常浪费。

Template.contextualFeed.feedItems = ->
    Feed.find()

Template.contextualFeed.jQueryMe = ->
    $("abbr.timeago").timeago() # Works, but seems incredibly wasteful


<template name="contextualFeed">
    <ul class="feed {{isActive "feed"}}">
    {{#each feedItems}}
    <li class="popup-holder">
        {{> contextualFeedItem}}
        {{jQueryMe}}
    </li>
    {{/each}}
    </ul>
</template>

3）在所有项目加载后 -> 工作，但仍然没有应有的优雅......

Template.contextualFeed.feedItems = ->
    Feed.find()

Template.contextualFeed.jQueryMe = ->
    Meteor.defer ->
        #(cut) some ugly code to make sure it only executes once.
        $("abbr.timeago").timeago() # Works, but seems incredibly wasteful


<template name="contextualFeed">
    <ul class="feed {{isActive "feed"}}">
    {{#each feedItems}}
    <li class="popup-holder">
        {{> contextualFeedItem}}
        {{jQueryMe}}
    </li>
    {{/each}}
    </ul>
</template>

4）当数据不是作为添加单独加载到每个项目上时，是否有一些事件会触发？

那么，你有在 Meteor 模板中调用 jQuery 的更简洁的方法吗？

PS：代码示例在 Coffeescript 中……尽管如此，请保持良好状态；）

4

2 回答 2

1

我认为这里有两种潜在的思路。您在 #4 中提出的想法，“dataLoaded”事件可能需要一些对话。然而，我想到的第一个论点是，正如你所说的那样，Meteor 是新一代流体 Web 应用程序框架。在那个世界中，加载了初始数据集究竟意味着什么？

第二个可能是您的问题有更好的解决方案。在某些情况下，jQuery 和 Meteor 的合并可能会让人感觉很笨拙，但是在粗略阅读了您的示例代码之后，我觉得在这个示例中可能有更好的方法。看起来您有一个 Feed 集合，并希望显示每个 Feed 项的实时时间戳，例如“2 小时前”。那是对的吗？

如果是这样：如果您不打算将活动时间戳存储在 Mongo 中，我认为示例 #2 不会非常浪费。诚然，我不确定 Meteor 中的最佳方式，但您应该能够在应用程序中缓存时间戳值。您可能要考虑的另一件事是将值与 Unix 时间戳分开存储在 Mongo 中 - 例如，几个小时。您可以在服务器上运行一个进程来更新提要项目的已用时间。假设提要项目最终过时，这是可持续的，它们的数量并不多，而且您不需要对时间戳非常精确。

我没有任何数据，也不认为这些方法 a) 正确且 b) 比明显的解决方案更快，但它值得深思。

ETA：Meteor.subscribe 可能有用http://docs.meteor.com/#meteor_subscribe。查看 todo 示例中的用法：https ://github.com/meteor/meteor/blob/master/examples/todos/client/todos.js

于 2012-05-14T16:28:42.423 回答
0

从一开始wordplay/client/wordplay.js，Meteor 的例子之一：

Words.find({player_id: Session.get('player_id'), state: 'bad'})
    .observe({
        added: function (word) {
            setTimeout(function () {
                $('#word_' + word._id).fadeOut(1000, function () {
                    Words.remove(word._id);
                });
            }, 5000);
        }
    }
);

你不需要你的模板来触发你的 JS 逻辑。只需使用.observe。

于 2012-05-15T16:30:29.527 回答