我正在使用骨干进行持久性和淘汰赛进行绑定,即我在页面加载时使用淘汰赛,一切都很好。当我单击复选框时,根据 IsChecked 的值,显示是或否。
当我单击重置模型按钮时,之前看到的行为会丢失。也就是说,如果显示“是”并且我单击重置,则无论复选框状态如何,都不会显示“否”。
如果我使用可见绑定,它会起作用,但我需要让这个“如果”起作用,以便我可以根据用户标准决定是否呈现某些表单元素。
任何帮助表示赞赏。谢谢。
这是我的示例代码:
<script type="text/javascript">
var model_a;
var collection_ac;
var example_new_model_a;
$(document).ready(function () {
model_a = Backbone.Model.extend({
idAttribute: 'A_Pid',
defaults: {
A_Pid: null,
ChildName: "",
IsChecked: false,
Show: false,
},
});
example_new_model_a = new model_a();
example_new_model_a.set('ChildName', 'child of test');
vm = kb.viewModel(example_new_model_a);
ko.applyBindings(vm, $('#div1')[0]);
});
var vm;
function reset_model() {
kb.utils.release(vm);
vm = null;
example_new_model_a = new model_a();
example_new_model_a.set('ChildName', 'child of test2');
vm = kb.viewModel(example_new_model_a);
ko.applyBindings(vm, $('#div1')[0]);
}
function show_div() {
example_new_model_a.set('Show', true);
}
<div id="div1">
<div data-bind="visible: Show">
Check or Uncheck <input type="checkbox" data-bind="checked: IsChecked" />
<!-- ko if:IsChecked -->
<p>yes</p>
<!-- /ko -->
<!-- ko if:!IsChecked() -->
<p>no</p>
<!-- /ko -->
<button data-bind="click: reset_model">Reset</button>
</div>
<button data-bind="click: show_div">Show</button>
编辑
我发现如果我添加以下代码,即使在按下重置后,它也可以工作。阅读后如何强制视图刷新而不使其从可观察对象自动触发?和Knockout.js Templates Foreach - 强制完成重新渲染,我用 if 尝试了模板,它可以工作。不知道如何调用 value 已经从击退视图模型中发生了变异,所以除非有更好的方法,否则我将使用这个解决方法。
<div data-bind="template: { name: 'test-template-1', if:IsChecked}"></div>
<script type="text/html" id="test-template-1">
<p>yes2</p>
</script>
<div data-bind="template: { name: 'test-template-2', if:!IsChecked()}"></div>
<script type="text/html" id="test-template-2">
<p>no2</p>
</script>