使用 Knockout 映射将数据发回服务器答案

【问题标题】：Post data back to server using Knockout mapping使用 Knockout 映射将数据发回服务器
【发布时间】：2013-08-14 13:30:50
【问题描述】：

我已经使用 KnockoutJs 和 KnockoutJs 映射插件将对象列表绑定到复选框列表，并使用此代码

服务器端类

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>

现在，当用户选择复选框时，我需要将用户选择的数据发布到 WebMethod（使用 Ajax 调用），但我不知道如何绑定事件来触发 ajax 调用。

【问题讨论】：

标签： jquery knockout.js webforms knockout-mapping-plugin

【解决方案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();
    }
};

【讨论】：