Question

I’m trying to use jScrollPane with meteor.js, but it’s not behaving as expected. First off, if I give the ‘.scroll-pane’ class to a div, it will work without being initialized explicitly by me. But when I try to initialize it explicitly, it does not work. Is this some sort of meteor magic? or I am missing something obvious.

Second, if I don’t initialize it, but I try to access it…it’s data is empty, so I can’t use the api on it. I’ve included some sample code below, please let me know if I am doing something wrong.

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

   ...
    }

If you need any more info, please let me know.

Thanks

Answer 1

There are a couple things going on:

(1) you need to wire up the reactivity to your template to ensure that the timing of the incoming Messages is correct. This is achieved by using a Session variable to set the load, and by setting Template.scroll.Messages equal to a function that returns a collection cursor. Typically, you would not need to set a Session this way if your Template.scroll.Messages returns a query that uses a Session object (i.e., a roomId). If that were the case, you could forgo the callback on the Meteor.subscribe call and the “loaded” Session altogether.

(2) you’ll want to turn off autopublish (meteor remove autopublish) and explicitly subscribe to the data so you know when your collection loads;

(3) you must declare your messages Collection outside the isClient block to ensure the server knows about it.

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