Meteor 模板元素在（重新）渲染期间失去样式答案

【问题标题】：Meteor template elements lose style during (re)renderMeteor 模板元素在（重新）渲染期间失去样式
【发布时间】：2014-02-22 20:16:16
【问题描述】：

我有一个模板，其中有一些文本每秒响应更新一次。

我还有一个按钮，单击该按钮后，其样式会更改为显示禁用的按钮 - 这可以正常工作，但一旦模板由于上述条件重新呈现，按钮就会恢复为原始样式。就好像整个模板从头开始渲染（template.render 每秒触发一次）。

这正常吗？我是否需要通过响应式 {{btnstyle}} 类型机制来控制样式？

【问题讨论】：

标签： meteor

【解决方案1】：

是的，执行此操作的典型方法是通过模板辅助函数设置的class 设置样式。要禁用按钮/输入元素，您可以只使用disabled 属性而不是class：

<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>

或

<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />

然后做：

Template.yourFormTemplate.buttonDisabled = function() {
  // return true or false depending on if the button should be disabled
};

问题在于，当 Meteor 重新渲染您的模板时，您设置样式的元素实际上被替换为新元素。请注意，Meteor 团队目前正在开发一个新的模板引擎，该引擎在更细粒度的级别上工作，因此元素不一定会像那样被替换。您可以使用以下命令在新模板引擎的预览版中试用您当前的代码：

meteor --release shark-1-29-2014-e

或

mrt --release shark-1-29-2014-e

但是，通常仍然建议通过 class 属性设置元素的样式，并使用模板助手进行设置。这是一种更具声明性、模板驱动的方法，更适合“流星方式”做事，而不是直接从 JavaScript 设置样式的命令式方法。通过允许您的 CSS 控制实际样式，它还有助于分离关注点。

【讨论】：

谢谢 - 所以每次发生反应性变化时 template.render 都会触发实际上是正确的吗？一个有趣的注意事项是，如果我设置了“.value”值，那么它不会被模板重新渲染覆盖。
是的，这就是旧模板引擎能够使更改反映在 HTML 输出中的方式。新的模板引擎更加智能，能够替换单个元素或单独设置它们的属性。出于这个原因，{{#constant}}、{{#isolate}} 和 preserve 将不再需要，因为它们是防止 Meteor 重新渲染模板的一部分的旧解决方法。
这里是 Meteor Docs 的相关部分，有助于解释旧模板引擎为何如此工作：docs.meteor.com/#template_preserve、docs.meteor.com/#constant 和 docs.meteor.com/#isolate。同样，所有这三个功能都不会出现在新模板引擎中，因为它足够智能，不再需要它们。
最后说明为什么value 没有被覆盖，这是因为默认的preserve-inputs 包。我不完全确定为什么它只在 value 实际更改时保留，但不管 preserve-inputs 包是另一个在新模板引擎发布时将过时的功能。