Meteor template applying jQuery plugin after rendered

Question

I am displaying a collection of "messages" in my Meteor app. When my template "messages" is rendered, I apply this jQuery plugin called "gridalicious", which basically displays the messages in a pinterest-like format.

All works well, but when I insert a new message, that new message is displayed twice. When I refresh the browser, the duplicate is gone.

I'm applying the plugin as follow

Template.messages.rendered = ->
  $("#message_box").gridalicious
    width:250
    animate:false
    selector:".message"
    gutter:0

Basically, if I get rid of this plugin, things messages display correctly, without any duplicates.

I'm not sure what would be causing this problem.

Answer 1

yes, i have similar prob like this. for this plugin or same satuation, to avoid it duplicates your template instance you can try make a global variable to handle your message box status, add some condition to decide if this new message's id is already been inside your global status handler and already been rendered, then don't render it twice.

global scope

isAlreadyBeenReneredId = null

Template instance of messages

Template.messages.rendered = ->
    if isAlreadyBeenReneredId isnt @data._id
        isAlreadyBeenReneredId = @data._id
        options =
            width: 250
            gutter: 0
        $("#message_box").gridalicious options

not real code, but some idea you might want to try.