1

meteor.js で jScrollPane を使用しようとしていますが、期待どおりに動作しません。まず、「.scroll-pane」クラスを div に指定すると、明示的に初期化されなくても機能します。しかし、明示的に初期化しようとすると、機能しません。これは流星魔法の一種か？または、明らかな何かが欠けています。

次に、初期化せずにアクセスしようとすると、データが空なので、API を使用できません。以下にサンプルコードをいくつか含めました。何か間違ったことをしている場合はお知らせください。

html

...
    <div class="rectangle">
      <div class="chat scroll-pane" id="chatWindow">

      {{#each Messages}}
      {{#if Compare uId UID}}
      <div class="bubble me">{{Text}}</div>
      {{else}}
      <div class="bubble you">{{Text}}</div>
      {{/if}}
      {{/each}} 
      </div>


      <input class="textinput" type="text" placeholder="Insert Message" id="textToSubmit">
      <button class="btn btn-success" id="submit" autofocus="autofocus">Send
        <br>
        <br>
      </button>
    </div>

js

    if (Meteor.isClient) {

    ...
    var Message = new Meteor.Collection("Message");

    Template.Message.rendered = function(){
      if(!this._rendered) {
        this._rendered = true;
        var scroll = $(this.find("#chatWindow"));
        var api = scroll.data('jsp');
        console.log(api);
      }
   };

   ...
    }

さらに情報が必要な場合は、お知らせください。

ありがとう

4

1 に答える 1

2

いくつかのことが起こっています：

（1）Messages受信のタイミングが正しいことを確認するために、反応性をテンプレートに接続する必要があります。これは、Session変数を使用して負荷を設定し、コレクション カーソルTemplate.scroll.Messagesを返す関数に等しい値を設定することによって実現されます。通常、オブジェクト (つまり、roomId)を使用するクエリを返す場合は、この方法でセッションを設定する必要はありません。その場合は、コールのコールバックと「ロード済み」を完全に忘れることができます。Template.scroll.MessagesSessionMeteor.subscribeSession

(2)autopublishコレクションがいつロードされるかがわかるように、オフ(meteor remove autopublish) にして明示的にデータをサブスクライブする必要があります。

(3)サーバーが確実に認識できるようにCollection、ブロックの外側でメッセージを宣言する必要があります。isClient

HTML:

<template name="scroll">
    <div class="rectangle">
        <div style="height:100px;overflow:auto;" id="chatWindow">
            {{#each Messages}}
                {{#if isMe this}}
                    <div class="bubble me">{{text}}</div>
                {{else}}
                    <div class="bubble you">{{text}}</div>
                {{/if}}
            {{/each}} 
        </div>
    </div>
</template>

JS:

Messages = new Meteor.Collection("messages");

if (Meteor.isClient) {
    Meteor.subscribe("messages", function () {
        Session.set("loaded", true);
    });

    Template.scroll.rendered = function () {
        if (Session.get("loaded")) {
            $(this.find("#chatWindow")).jScrollPane();
            var api = $(this.find("#chatWindow")).data("jsp");
            ...
        }
    };

    Template.scroll.helpers({
        isMe: function (msg) {
            return msg.userName === 'me';
        }
    });

    Template.scroll.Messages = function () {
        return Messages.find({});
    };
}

if (Meteor.isServer) {
        Meteor.startup(function () {
        if (Messages.find().count() === 0) {
            Messages.insert({ text: 'Message 1', userName: 'me' });
            Messages.insert({ text: 'Message 2', userName: 'you' });
            Messages.insert({ text: 'Message 3', userName: 'me' });
        }
    });
    Meteor.publish("messages", function () { return Messages.find({}); });
}
于 2013-01-13T22:53:24.693 に答える