流星模板元素在（重新）渲染过程中失去了风格

Question

我有一个模板，每秒有一次反应更新的文本。

我还有一个按钮，当点击时，将其样式更改为显示禁用按钮 - 这样可以正常工作但是一旦模板由于上述条件而重新渲染，则按钮将恢复为原始样式。这几乎就好像整个模板都是从头开始渲染（每秒都会触发template.render）。

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

Answer 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属性设置元素样式，并使用模板助手进行设置。这是一种更具声明性，模板驱动的方法，更适合用“Meteor方式”来做事，而不是直接从JavaScript设置样式的命令方法。通过允许CSS控制实际风格，它还有助于分离问题。