0

我的情况是我有 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); }
            });
        };

我的第二个视图模型。

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

1 回答 1

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>

希望有帮助。

于 2013-04-01T17:05:31.940 回答