淘汰赛 - 模板何时重新渲染答案

【问题标题】：Knockout - when does a template re-render淘汰赛 - 模板何时重新渲染
【发布时间】：2012-11-29 00:11:12
【问题描述】：

我们有一个简单的模板，可以在可编辑和不可编辑之间切换。基本上它只是隐藏输入字段并显示一个跨度，或者相反。

<script type="text/html" id="inputTextTemplate">
    <input type="text" data-bind="value: field, visible: $data.isEdit" />
    <span data-bind="text: field, visible: !$data.isEdit"></span>
</script>

我们也有一些通过 JQuery 应用的样式，但问题是每次模板从可编辑和不可编辑切换时，它都会重新渲染并且这些样式消失了。

这是一个问题的 jsFiddle。

http://jsfiddle.net/uCWx4/4/

为什么会这样？我们如何解决这个问题，使模板只呈现一次？

【问题讨论】：

标签： knockout.js

【解决方案1】：

看起来问题在于我向它发送了一个值，而不是一个可观察的。如果我制作一个可观察的或计算的，那么模板只呈现一次。所以在调用模板之前是

isEdit: isEdit() == 'true'

如果我创建一个计算的

this.isEditable = ko.computed(function(){
    return self.isEdit() == 'true';
});

并调用它

isEdit: isEditable

它按预期工作。

http://jsfiddle.net/uCWx4/8/

【讨论】：

在我的示例中，它是一个字符串，因为单选按钮将其设置为“真”或“假”。如果我只是做return self.isEdit();，那么“假”也将是真的。

【解决方案2】：

您可以执行以下操作：
HTML 代码
我已经为 css: { first: $data.isEdit } 和 css: { second: !$data.isEdit } 这样的两个控件添加了 css 类

    <script type="text/html" id="inputTextTemplate">
        <input type="text" data-bind="css: { first: $data.isEdit }, value: field, visible: $data.isEdit" />
        <span data-bind="css: { second: !$data.isEdit }, text: field, visible: !$data.isEdit">   </span>
    </script>

还有一些 CSS

.first{
  color: red;
}
.second{
  color: blue;
}

请阅读official documentation about css binding

另外，这里是DEMO

希望对你有帮助。

【讨论】：

感谢您的示例，但在这种情况下没有帮助。我应该稍微详细说明一下这个问题。我们还做了一些事件连线、焦点、模糊、JQuery ui 控件……这些是不能通过 css 完成的。

【解决方案3】：

你fiddle实际上并没有通过jQuery应用任何样式，但是我在使用with时遇到了类似的问题。

解决办法是不这样做。考虑一下是否可以改为使用 ViewModel 中的 observable 在模板中应用样式。否则，每次重新渲染模板时，您都需要通过 jQuery 重新应用这些样式。

【讨论】：