Meteor 如何有效地更改多个元素的样式

我有一个简单的图像列表和一个按钮，我用它来改变这些图像的大小，每当它被点击。我以几种方式实现了这个行为，并且有显著的性能和行为（模板重新呈现）差异。我的问题是，在Meteor中实现这一点的首选方法是什么

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

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

Template.controls.events={
“单击#更改#大小”：函数（）{
设置（“高度”、“20px”）；
}
};
Template.image.height=函数（）{
返回会话。获取（“高度”）；
};

解决方案2（jQuery+状态）：

Template.controls.events={
“单击#更改#大小”：函数（）{
设置（“高度”、“20px”）；
}
};
Meteor.autorun（函数（）{
$（“img”）.css（{height:Session.get（“height”）}）；
})

解决方案3（jQuery）：

Template.controls.events={
“单击#更改#大小”：函数（）{
$（“img”）.css（{height:“20px”}）；
}
};

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

Template.controls.events={
“单击#更改#大小”：函数（）{
设置（“高度”、“20px”）；
}
};
{{{#每个图像集}
{{/每个}}
Template.image\u set.height=函数（）{
返回会话。获取（“高度”）；
};

解决方案5:？？？

我会选择1或3，这取决于应用程序的灵活性，或者我是从基于jQuery的应用程序移植到Meteor，等等。如果我有一个已经使用内置反应变量（如

Session

）的替代方案，我宁愿避免使用

Meteor.autorun

，它让人感觉更干净，更有目的性。您的第四个解决方案实际上解决了一个不同的问题：它一次设置多个图像的高度。那可能不是你想要的

总的来说，我认为#1是最迅速的，因为它在文档中，并且它使用会话的默认反应与模板配合。

#1和#2混合了jQuery dom操作和会话。出于性能和一致性的原因，我会避免使用它们。 如果#3和#4具有相当的性能，那么#4就是最好的选择，因为该会话允许您在需要时轻松“插入”其他事件处理程序

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

解决方案#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");
};

Template.controls.events={
“单击#更改#大小”：函数（）{
设置（“高度”、“20px”）；
}
};
...
我的班级{
高度：{{height}}；
}    
Template.css.height=函数（）{
返回会话。获取（“高度”）；
};

优点：

• 没有jQuery
• 单模板渲染
• 所有样式都由优化的浏览器代码完成

缺点？

我有多张图片$（“img”）也可以处理多幅图像。以及#1，它分别处理每个图像，但使用存储在会话变量中的全局数据。正如我在问题中补充的-#1在涉及许多项时速度较慢。#1-没有jQuery#4-相当慢。为什么是4而不是1？为什么要避免DOM操作和会话？你是对的，没有jQuery。混合DOM操作和会话并没有错；当然，每个系统都有自己的开销，只要使用一个系统，您就可以获得更好的性能和可维护性。

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")});
})

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

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

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");
};

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");
};