1

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

<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/

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

4

3 回答 3

2

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

isEdit: isEdit() == 'true'

如果我创建一个计算

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

并调用它

isEdit: isEditable

它按预期工作。

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

于 2012-11-28T16:11:12.037 回答
1


您可以执行以下操作：
HTML 代码
我已经为像 thiscss: { first: $data.isEdit }和 this 这样的两个控件添加了 css 类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;
}

​<br/> css绑定请阅读官方文档

另外，这里是DEMO

希望对你有帮助。

于 2012-11-28T15:27:48.727 回答
0

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

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

于 2012-11-28T15:17:17.200 回答