KnockoutJs & Asp.Net MVC 4 - 多模型视图 提交

Question

我在一个情况下，我有2个选项卡，每个选项卡我有一个部分视图，我使用jquery UI来创建我的选项卡。

每个用户有两个选项1。2.节省;提交。

在保存时，它将保存为特定的选项卡(其中选项卡包含模型视图1)对于第二个相同的选项卡(其中此表包含模型视图2)

我如何从两个选项卡提交两个模型与一个点击?

我在我的保存选项卡1和选项卡2中有这样的内容。

我的第一个视图模型

       self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.firstVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
        };

My second view Model.

         self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.secondVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
         };

Answer 1

跟进我的评论。这是第一种方法的小提琴

http://jsfiddle.net/sujesharukil/FDPAn/

var child1ViewModel = function(){
    var x = ko.observable(1),
            y = ko.observable('child1'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
           },
        save= function(){
            alert(getData());
            //some ajax call
        };

    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};
var child2ViewModel = function(){
    var x = ko.observable(2),
        y = ko.observable('child2'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
        },
        save= function(){
            alert(getData());
            //some ajax call
        };
    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};
var parentViewModel = function(){
    var child1 = new child1ViewModel(),
        child2 = new child2ViewModel(),
        submit = function(){
            var data = {
                child1Data: child1.getData(),
                child2Data : child2.getData()
            };
            alert(JSON.stringify(data));
            //make ajax submit
        };
    return {
        child1: child1,
        child2: child2,
            submit: submit
    }
}
ko.applyBindings(new parentViewModel());

， HTML是

<form data-bind="submit: submit">
    <h1>Data from CHild 1</h1>
    x = <input data-bind="value: child1.x"/><br/>
    y = <input data-bind="value: child1.y"/><br/>
    <button type="button" data-bind="click: child1.save">Save Child1</button>
    <h1>Data from CHild 2</h1>
    x = <input data-bind="value: child2.x"/><br/>
    y = <input data-bind="value: child2.y"/><br/>
    <button type="button" data-bind="click: child2.save">Save Child2</button><br/>
    <button type="submit">Submit</button>
</form>

希望对你有帮助。