渲染后应用jQuery插件的流星模板

Question

我在Meteor应用程序中显示了一组“消息”。当我的模板“messages”被渲染时，我应用这个名为“gridalicious”的jQuery插件，它基本上以类似pinterest的格式显示消息。

一切正常，但是当我插入新消息时，该新消息会显示两次。当我刷新浏览器时，副本就消失了。

我正在应用插件

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

基本上，如果我摆脱这个插件，就会正确显示消息，没有任何重复。

我不确定会导致这个问题的原因。

Answer 1

是的，我有类似的问题。对于此插件或相同的饱和度，为了避免它复制您的模板实例，您可以尝试创建一个全局变量来处理您的消息框状态，添加一些条件来确定此新消息的id是否已经在您的全局状态处理程序中并且已经被渲染，然后不要渲染两次。

全局范围

isAlreadyBeenReneredId = null

消息的模板实例

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

不是真正的代码，但您可能想尝试一些想法。

Answer 2

据我所知，Meteor并没有一次又一次地呈现一切，只有差异。所以我认为问题是，你在同一个元素上多次调用jQuery插件。

我不知道插件，但似乎有一个append方法，也许这可能有用吗？

Answer 3

试试这个：

if (Meteor.isClient) {
  Meteor.startup(function () {
    $(document).ready(function (){
     $("#message_box").gridalicious({
        width:250,
        animate:false,
        selector:".message",
        gutter:0
     });
    });
  });
}

抱歉，我不知道如何在coffescript中写出等效文件。