jquery - Post data back to server using Knockout mapping

Question

I've bind list of objects to check boxes list using KnockoutJs and KnockoutJs Mapping Plugin, with this code

Server Side Class

public struct FilterListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
}

Javascript

$(document).ready(function () {

    var dto = { 'categoryId': getUrlVars()["scid"] };

    $.ajax({
        url: "ProductListTest.aspx/GetFiltersWeb",
        data: JSON.stringify(dto),
        type: "POST",
        contentType: "application/json",
        dataType: "JSON",
        timeout: 10000,
        success: function (result) {
            bindFilterModel(result);
        }
    });
});

function bindFilterModel(data) {
    console.log(data);
    var jsonObject;
    jsonObject = ko.mapping.fromJS(data);
    var viewModel = { CategoryList: jsonObject.d };
    ko.applyBindings(viewModel);
}

HTML

<div data-bind="foreach: CategoryList.SubCategoryList">
    <div class="line">
        <div>
            <input type="checkbox" data-bind="value: Value" /><span data-bind="text: Text"></span>
        </div>
    </div>
</div>

Now I need to post user selected data to a WebMethod (with a Ajax call), when a user selected a checkbox, but I can not figure out how to bind event to trigger the ajax call.

Answer 1

你可以使用 RP 的脏插件

http://jsfiddle.net/df6z6/

ViewModel = function(data) {    
    ko.mapping.fromJS(data, {}, this);
    this.dirty = ko.dirtyFlag(this.items, false);
    this.dirty.isDirty.subscribe(this.onDirty, this);
};

ViewModel.prototype = {
    onDirty: function() {
        console.log("Post here");
        this.dirty.reset();
    }
};