Как эффективно изменить стиль нескольких элементов

Question

У меня есть простой список изображений и кнопка, которую я использую для изменения размера этих изображений всякий раз, когда нажимается. Я реализовал это поведение несколькими способами, и есть существенные различия в производительности и поведении (перепрофилирование шаблонов). Мой вопрос в том, что является предпочтительным способом реализации этого в Метеор?

Это минимальный рабочий пример. На самом деле изображения могут быть лучше идентифицированы, и изменение размера может быть вызвано из разных событий.

Раствор 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: ???

Answer 1

Решение # 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"); 
}; 

Pros:

• не JQuery
• один шаблон рендеринга
• все моделирование осуществляется с помощью оптимизированного кода браузера

Минусы?

Answer 2

Я бы пошел с # 1 или # 3 в зависимости от того, насколько гибким должно быть приложение, или я переношу из приложения на основе jQuery в Meteor и т. Д. Я предпочитаю избегать Meteor.autorun, если у меня есть альтернатива который уже использует встроенную реактивную переменную, например Session, он чувствует себя более чистым и более преднамеренным. Ваше четвертое решение фактически решает другую проблему: он устанавливает высоту на нескольких изображениях одновременно. Возможно, это не то, что вы хотите.

В целом я думаю, что № 1 является самым Метеорным, учитывая, что он находится в документах, и он использует стандартную реактивность Сессии в сотрудничестве с Template.

Answer 3

# 1 и # 2 смешивать манипуляции jQuery dom и сеансы. Я бы избегал их по соображениям эффективности и согласованности. , если # 3 и # 4 имеют сопоставимую производительность, # 4 - путь, так как этот сеанс позволяет вам легко «подключать» другие обработчики событий, если это необходимо.

Если возможно, я бы предложил предложить манипулировать классом обертки и установить высоту изображения с помощью правила css.