Question

I have an issue using the protectedObservable custom binding below found at this link.

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

The protected observable is nested within 3 child templates.

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

When this isn’t a protected observable the viewmodel doesn’t rerender itself. When it is protected the template rerenders and it loses it’s initial value. Any clue why this is going on?

self.divisionTeamId = ko.protectedObservable(undefined);

Custom Binding

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

UPDATE

I found that removing the stopBinding fixed the issue.

<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

I removed the stopBinding:true and it fixed it. So I took a different route with populating the dynamic HTML since I still wanted to use stopBinding:true. I explicitly populated the dynamic HTML container that is filled during an ajax call. So instead of setting it with the “html” binding of the container element, I used jQuery $(container).html(…) to populate it. My final implementation is below. The stopBinding either uses the parent VM or a new one depending on the ajax page stopBinding property.

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