Question

当从移动端添加到动态列表中的新照片时，我使用materialbox（jQuery插件来显示Material Design灯箱样式）。当照片准备好并在DOM中可见时，模板事件开始：

Template.item.events({
'click .materialboxed':function(e,t){
        setTimeout(function(){
            $('.materialboxed').materialbox();
        },0)
    }
});

DOM：

<div class="col s2" style="text-align:left;">
  {{#if pictureExist}}
  <img src="{{picture}}" alt="" class="responsive-img materialboxed"> <!-- notice the "circle" class -->
  {{else}}
  <div class="takePicture"><i class="mdi-image-photo-camera small"></i></div>
  {{/if}}
</div>

是否有最好的Meteor方式而不是setTimeout来实例化反应数据中的jQuery代码？

由于

Answer 1

尝试删除计时器。

Template.item.events({
    'click .materialboxed':function(e,t){
                $('.materialboxed').materialbox();
        }
    });

它应该有用。

Answer 2

我认为你在Meteor世界中的表现非常好。

由于您不希望在创建模板时实例化任何内容，并且您不想跟踪模板的状态，因此注册一个事件来调用该jQuery代码似乎是直接的方式来实现它

编辑：看看你对另一个答案的回答，这就是你需要的：

Template.item.rendered = function () {

  # this.$() will only look for elements inside this template
  this.$('.materialboxed').materialbox();
};

为了优化您的实现，我们只在单击的元素上启动您的jQuery插件。每次呈现.materialboxed模板时，不要使用item类将其初始化到每个元素上。

template.$()函数的工作方式与jQuery完全相同，但只能查找模板中的元素。我不确定这个函数如何与jQuery插件一起工作，但你可以先使用这个函数返回确切的元素，保存它，然后手动将它转换为jQuery对象。

此处有关于此的更多信息： http://docs.meteor.com/#/basic/Blaze-TemplateInstance-findAll

Meteor：我可以使用什么而不是setTimeout来反应DOM变化？

2 个答案: