Question

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

<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应用的样式，但问题是，每次模板从可编辑切换而不可编辑时，它会被重新渲染，并且这些样式消失了。

这是问题的一个问题。

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

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

Answer 1

看起来问题是我发送的是一个值，而不是一个可观察的值。如果我创建一个可观察或计算，则模板只渲染一次。所以在调用模板之前

isEdit: isEdit() == 'true'

如果我创建一个计算

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

并用

调用它

isEdit: isEditable

它按预期工作。

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

Answer 2

你可以做以下事情：
HTML代码
我为这两个控件添加了css类，例如css: { first: $data.isEdit }和css: { second: !$data.isEdit }

    <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

希望它会对你有所帮助。

Answer 3

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

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

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

3 个答案: