淘汰赛肮脏的标志代码不起作用

Question

Just started with knockout and need to implement page change warning. Following is the code snippet. I just need an alert pop up as warning if any change is made on the page.

function parseViewModel() {

    var viewModel = JSON.parse(getState());

    viewModel.checking = ko.observable(false);
    viewModel.Slider = new ko.observable(100 - viewModel.Slider);
    viewModel.CausalsList = buildHierarchy(viewModel.Causals);
    viewModel.Causals["-1"] = "Total Marketing Budget";
    viewModel.GeographiesList = ko.observableArray(gl);
    viewModel.Geographies["0"] = "All Geographies";
    viewModel.ProductsList = ko.observableArray(pl);
    viewModel.Products["0"] = "All Products";
    .
    .
    .

    return viewModel;
}

function bindModel() {

    model = parseViewModel();

    ko.dirtyFlag = function (root, isInitiallyDirty) {
        var result = function () { },
        _initialState = ko.observable(ko.toJSON(root)),
        _isInitiallyDirty = ko.observable(isInitiallyDirty);

        result.isDirty = ko.computed(function () {
            return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
        });

        result.reset = function () {
            _initialState(ko.toJSON(root));
            _isInitiallyDirty(false);
        };

        return result;
    };


    model.dirtyFlag = new ko.dirtyFlag(model);
    model.isDirty.subscribe(function () {
        alert("Page change warning!");
    });

    ko.applyBindings(model, $('#const').get(0));
    ko.applyBindings(model, $('#buttonDiv').get(0));
}

Referred Ryan Niemeyer's blog. Unfortunately, it's not working anymore. Any insights please?

Answer 1

您可能要在您的情况下订阅model.dirtyFlag.isDirty而不是model.isDirty 。

Answer 2

One way to do is by using customBinding. I'm not that familiar with KO either but this might be something you're interested on.

Basically you would do is :-

ko.bindingHandlers.myFunction = {
    update : function(){
                //do something
             }
}

http://knockoutjs.com/documentation/custom-bindings.html

And call it on your element using :-

<h1 data-bind="myFunction:{}"></h1>

Also, a jsfiddle to show how it works. (If you change the value of the First Name and focus out of it then the customBinding gets triggered. )

http://jsfiddle.net/3vuTk

Not sure if it's the best practice though.