Javascript jScrollPane不使用meteor.js

我正在尝试将jScrollPane与meteor.js一起使用，但它的行为与预期不符。首先，如果我将“.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>

如果你需要更多的信息，请告诉我

---

谢谢

发生了几件事：

（1）您需要将反应性连接到模板，以确保传入的

消息的时间安排正确。这是通过使用
会话
变量来设置加载，并通过将
Template.scroll.Messages
设置为等于返回。通常，如果
Template.scroll.Messages
返回使用
会话
对象（即roomId）的查询，则不需要以这种方式设置会话。如果是这样的话，您可以放弃Meteor.subscribe调用的回调和“loaded”会话

（2）您需要关闭
自动发布
（meteor remove autopublish）并显式订阅数据，以便知道何时加载收藏

（3）您必须在
isClient
块之外声明您的邮件
集合
，以确保服务器知道它

HTML:

我无法让它工作，所以我只是删除了插件。结果发现我根本不需要它。不过，我确实使用了您的一些代码来初始化其他JQuery插件。我发现在订阅中设置会话变量是一个非常好的技巧。非常感谢！如果有人遇到同样的问题，请在这里发表评论。
    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);
      }
   };

   ...
    }

<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>

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({}); });
}