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

【问题标题】：KnockoutJs & Asp.Net MVC 4 - multi model views SubmitKnockoutJs & Asp.Net MVC 4 - 多模型视图提交
【发布时间】：2013-03-22 12:43:52
【问题描述】：

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

【问题讨论】：

您希望他们提交到单个 URL 吗？还是可以单独提交？我的意思是，您是否必须进行相同的 ajax 调用，还是会转到一个完全不同的 url，它采用不同的对象？
Sujesh，是同一个网址……
对此有不同的方法。 1. 你需要一个包含两个孩子的 parentViewModel。然后提交将在可以从孩子那里获取值的父母中。另一种方法（更解耦的方法）是使用 pub/sub。您创建一个视图模型来进行提交。点击提交按钮时会调用viewmodel提交数据。提交函数发出一个调用，向它发送所有数据并订阅将由两个子视图模型发布的事件。你可以使用放大js来做pub/sub

标签： knockout.js knockout-mapping-plugin knockout-2.0 knockout-validation knockout-mvc

【解决方案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>

希望对您有所帮助。

【讨论】：