knockout.js - 受保护的 Observable 重新渲染整个视图模型

Question

我在使用以下链接中的 protectedObservable 自定义绑定时遇到问题。

http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

受保护的 observable 嵌套在 3 个子模板中。

<select class="select-teams bracket-select" data-bind="value: divisionTeamId, options: $root.teams, optionsText: 'Name', optionsValue: 'Id', optionsCaption: ' - Teams - '"></select>

当这不是受保护的可观察对象时，视图模型不会重新呈现自己。当它受到保护时，模板会重新呈现并失去其初始值。任何线索为什么会这样？

self.divisionTeamId = ko.protectedObservable(undefined);

自定义绑定

ko.protectedObservable = function (initialValue) {

        var _actualValue = ko.observable(initialValue),
        _tempValue = initialValue;

        var result = ko.computed({
            read: function () {
                return _actualValue();
            },
            write: function (newValue) {
                _tempValue = newValue;
            }
        });

        result.commit = function () {
            if (_tempValue !== _actualValue()) {
                _actualValue(_tempValue);
            }
        };

        result.reset = function () {
            _actualValue.valueHasMutated();
            _tempValue = _actualValue();
        };

        return result;
    };

更新

我发现删除 stopBinding 解决了这个问题。

<div data-bind="stopBinding: true">
    <div id="bracket-namespace">
          .....
    </div>
</div>

    app.members.bracket.init = function (options) {
        viewModel = new ViewModel(options);

        ko.applyBindings(viewModel, document.getElementById("bracket-namespace"));
    };

ko.bindingHandlers.stopBinding = {
    init: function () {
        return { controlsDescendantBindings: true };
    }
};

Answer 1

我删除了 stopBinding:true 并修复了它。所以我采取了不同的方法来填充动态 HTML，因为我仍然想使用 stopBinding:true。我显式地填充了在 ajax 调用期间填充的动态 HTML 容器。因此，我没有使用容器元素的“html”绑定来设置它，而是使用 jQuery $(container).html(...) 来填充它。我的最终实现如下。stopBinding 使用父虚拟机或新虚拟机，具体取决于 ajax 页面 stopBinding 属性。

<div id="container" class="clearfix" data-bind="stopBinding: members.stopBinding, container: {}">  
     @RenderBody()
</div>