jScrollPane不能使用meteor.js

Question

我正在尝试使用jteorroll.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); 
     } 
    }; 

    ... 
    } 

如果您需要任何更多的信息，请让我知道。

感谢

Answer 1

有一对夫妇因为下列原因：

（1）你需要的反应电汇到你的模板，以确保进入Messages的时机是正确的。这是通过使用Session变量来设置负载，并通过将Template.scroll.Messages设置为等于返回collection cursor的函数来实现的。通常，如果Template.scroll.Messages返回使用Session对象（即roomId）的查询，则无需以此方式设置会话。如果是这种情况，您可以放弃拨打Meteor.subscribe电话的呼叫以及完全“加载”的Session。

（2）你要关闭autopublish（流星删除自动发布），并明确订阅数据，让你知道当你收集载荷;

（3）您必须在isClient块之外声明您的消息Collection以确保服务器知道它。

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