Meteor模板渲染后应用jQuery插件

Question

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

一切都很顺利，但是当我插入新消息时，新消息会显示两次。当我刷新浏览器时，重复的消息就消失了。

我是这样应用插件的：

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

基本上，如果我卸载这个插件，信息将正确显示，不会出现任何重复。我不确定是什么原因导致了这个问题。

- ericbae

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

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

- crapthings

---

谢谢，但这不是一个合适的做法。你不觉得吗？ - ericbae

或者我们应该使用template.templateName.created吗？ - crapthings

Answer 2

试试这个：

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

抱歉，我不知道如何用Coffeescript编写相应的代码。

- Michal Kowalkowski

Answer 3

据我所知，Meteor 不会一遍又一遍地重复渲染所有内容，而是仅渲染差异部分。因此，我认为问题在于您多次在同一元素上调用了 jQuery 插件。

我不熟悉这个插件，但似乎有一个 append 方法，也许这个方法可以有所帮助？

- Andreas