0

我有一个简单的图像列表和一个按钮，每当单击它时，我都会使用它来更改这些图像的大小。我以多种方式实现了这种行为，并且存在显着的性能和行为（模板重新渲染）差异。我的问题是在 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 + 状态）：

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：？？？

4

3 回答 3

1

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

总的来说，我认为 #1 是最流星的，因为它在文档中并且它使用 Session 与 Template 合作的默认反应性。

于 2013-03-12T12:00:58.950 回答
0

#1 和 #2 混合使用 jQuery dom 操作和会话。出于性能和连贯性的原因，我会避免使用它们。如果 #3 和 #4 具有可比的性能，则 #4 是要走的路，因为该 Session 允许您在需要时轻松“插入”其他事件处理程序。

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

于 2013-03-12T22:47:03.137 回答
0

解决方案#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
  • 单模板渲染
  • 所有样式均由优化的浏览器代码完成

缺点？

于 2013-03-25T22:15:00.040 回答