-1

jQueryとMeteor

Meteor はリアクティブで、最初のページの読み込みが 1 回しかない Web Apps の世界で生まれました。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) 各アイテムについて -> 動作しますが、信じられないほど無駄に思えます。

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

ここには 2 つの潜在的な思考の流れがあると思います。＃4で提案したアイデア、「dataLoaded」イベントは、いくつかの会話を保証するかもしれません。ただし、頭に浮かぶ最初の議論は、あなたが正しく言ったように、Meteor は新世代の流動的な Web アプリ フレームワークであるということです。その世界では、データの初期セットが読み込まれたとは正確にはどういう意味ですか?

2 つ目は、問題に対するより良い解決策があるということです。jQuery と Meteor のマージがぎこちなく感じる場合は確かにあるかもしれませんが、サンプル コードをざっと読んだ後、この例にはもっと良い方法があるように感じます。フィード コレクションがあり、「2 時間前」などの各フィード アイテムの有効なタイムスタンプを表示したいと考えています。あれは正しいですか？

もしそうなら：Mongoで提示された生きているタイムスタンプを保存しないのであれば、例＃2はそれほど無駄ではないと思います。確かに Meteor での最善の方法はわかりませんが、アプリでタイムスタンプ値をキャッシュできるはずです。考慮したいもう 1 つのことは、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 の例の 1 つ:

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 に答える