0

このリンクにある以下の protectedObservable カスタム バインディングの使用に問題があります。

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

保護されたオブザーバブルは、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 };
    }
};
4

1 に答える 1

0

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>
于 2012-08-27T17:31:15.750 に答える