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

时间:2013-08-13 04:09:47

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

我使用KnockoutJs和KnockoutJs Mapping Plugin将对象列表绑定到复选框列表,使用此代码

服务器端类

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调用。

1 个答案:

答案 0 :(得分:0)

您可以使用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();
    }
};