knockback - 骨干模型重置,如果渲染则淘汰

时间:2012-09-07 22:43:25

标签: backbone.js knockout.js knockback.js

我正在使用主干来持久化和敲除绑定,即我正在使用击退 在页面加载时,一切都很好。当我单击复选框时,根据IsChecked的值,显示是或否。

当我点击重置模型按钮时,之前看到的行为将丢失。 也就是说,如果显示“是”并且我点击重置,则无论复选框状态如何,都不会显示“否”。

如果我使用可见绑定它会起作用,但我需要让'if'工作,以便我可以根据用户标准决定是否渲染一些表单元素。

感谢任何帮助。感谢。

以下是我的示例代码:

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

修改

我发现如果我添加以下代码,即使按下重置后,它也能正常工作。阅读How to force a view refresh without having it trigger automatically from an observable?Knockout.js Templates Foreach - force complete re-render之后,我尝试使用if和模板的模板。不确定如何调用值已经从knockback视图模型变异,所以除非有更好的方法,否则我将使用此解决方法。

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

1 个答案:

答案 0 :(得分:0)

希望我不会误解你的问题:我使用memento将模型重置为以前的状态。

当我加载新视图时:我使用model.store()创建快照 离开页面或重置时我调用model.restore()