Question

我有一个简单的图像列表和一个按钮，用于在点击图像时更改这些图像的大小。我以多种方式实现了这种行为，并且存在显着的性能和行为（模板重新呈现）差异。我的问题是在Meteor中实现这个的首选方法是什么？

这是一个最小的工作示例。实际上，可以更好地识别图像，并且可以从不同的事件触发尺寸变化。

解决方案1（演示方式=慢速/重新渲染）：

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image">
    <img src="img.jpg" style="height: {{height}}"/>
</template>

Template.image.height = function() {
    return Session.get("height");
};

解决方案2（jQuery + state）：

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image">
    <img src="img.jpg"/>
</template>

Meteor.autorun(function() {
    $("img").css({height: Session.get("height")});
})

解决方案3（jQuery）：

Template.controls.events = {
    "click #change_size": function() {
        $("img").css({height: "20px"});
    }
};

<template name="image">
    <img src="img.jpg"/>
</template>

解决方案4（反应性父母）：

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<template name="image_set">
    {{#each image_set}}
    <img src="img.jpg" style="height: {{../height}}"/>
    {{/each}}
</template>

Template.image_set.height = function() {
    return Session.get("height");
};

解决方案5：???

Answer 1

我会选择＃1或＃3，具体取决于应用程序的灵活性，或者我是否从基于jQuery的应用程序移植到Meteor等等。我更愿意避免Meteor.autorun如果我有一个替代品，已经使用内置的反应变量，如Session，它感觉更清洁，更有意。您的第四个解决方案实际上解决了另一个问题：它一次在多个图像上设置高度。这可能不是你想要的。

总的来说，我认为＃1是最流行的，因为它在文档中，它使用Session与Template的默认反应性。

Answer 2

＃p>＃1和＃2混合使用jQuery dom操作和Sessions。我会因性能和连贯性原因而避免使用它们。如果＃3和＃4具有相似的性能，那么＃4是可行的方法，因为该会话允许您在需要时轻松“插入”其他事件处理程序。

如果可能的话，我宁愿建议操纵包装器的类并使用css规则设置图像高度。

Answer 3

解决方案＃5：

我不知道它是否被认为是一个很好的流星练习，或者是否有流星最佳实践这样的事情。解决方案是使用模板化嵌入式css规则。以下几行似乎可以解决问题：

Template.controls.events = {
    "click #change_size": function() {
        Session.set("height", "20px");
    }
};

<img src="img1.jpg" class="my_class" />
...
<img src="img1000.jpg" class="my_class" />

<template name="css">
<style media="screen" type="text/css">
img.my_class {
  height: {{height}};
}    
</template>

Template.css.height = function() {
    return Session.get("height");
};

优点：

没有jQuery
单一模板渲染
所有样式均由优化的浏览器代码

缺点？

如何有效地改变多元素的风格

3 个答案: