将knockoutjs视图模型传递给多个ajax调用

我有一个函数，可以调用ajax来获取初始数据并将其保存到viewmodel。然后，我将返回的viewmodel（字符串化数据）传递到另一个函数中，该函数进行另一个ajax调用，以此类推。每个函数都绑定到onclick按钮事件。当我将初始视图模型放入document.ready时，我只能将其传递给其他函数。我从每个函数得到的数据是100%正确的。但是，每当我绑定viewmodel时，它都会覆盖以前的绑定，并且这些值不会保持不变。代码如下：

JavaScript

<
script type=“text/javascript”language='javascript'>
var MyProject={}；
var模型；
MyProject.viewModel=“”；
var模型；
$（document）.ready（函数InitializeInvoice（）{
$.ajax({
类型：“Post”，
url：“Default.aspx/InitializeModel”，
数据：{}，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：初始化Invoice
});
函数初始化Invoice（msg）{
var defaultdata=msg.d.Data；
invoiceModel=defaultdata；
MyProject.viewModel=ko.mapping.fromJS（invoiceModel）；
ko.applyBindings（MyProject.viewModel）
};
})
函数GetVendorInvoiceDefaults（）{
MyProject.viewModel=JSON.stringify（invoiceModel）；
var data='{invoice:'+MyProject.viewModel+'}'；
$.ajax({
类型：“Post”，
url:“Default.aspx/GetVendorInvoiceDefaults”，
数据：数据，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：GetVendorInVoiceDefaultsAccess
});
}
函数GetVendorInVoiceDefaultsAccess（msg）{
var defaultdata=msg.d.Data；
invoiceModel=defaultdata；
MyProject.viewModel=ko.mapping.fromJS（invoiceModel）；
ko.applyBindings（MyProject.viewModel）
};
函数GetVendorCode（）{
var vendormodel=JSON.stringify（invoiceModel）；
var数据='{invoice:'+vendormodel+'}'；
$.ajax({
类型：“Post”，
url:“Default.aspx/GetVendorCode”，
数据：“{发票：'+vendormodel+'}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
async:false，
成功：GetVendorCodesuces
});
}
函数GetVendorCodeSucess（msg）{
var defaultdata=msg.d.Data；
MyProject.viewModel=ko.mapping.fromJS（defaultdata）；
ko.applyBindings（MyProject.viewModel）
};
#HTML#
发票说明

分发代码

供应商代码

初始化Invoice

GetVendorInvoiceDefaults

GetVendorCode
#ASPX文件#
命名空间WebApplication9
{
公共部分类\u默认值：System.Web.UI.Page
{
受保护的无效页面加载（对象发送方、事件参数e）
{
}
受保护的覆盖无效加载（事件参数e）
{
如果（iPostBack）
{
clientSideIsPostBack.Value=“Y”；
}
其他的
clientSideIsPostBack.Value=“N”；
基础荷载（e）；
}
[网络方法]
公共静态JsonResult InitializeModel（）
{
var发票=新发票（）{InvoiceNumber=“1235”，InvoiceDescription=“Hello World”，DistributionCode=”“}；
JsonResult r=新的JsonResult（）；
r、 数据=发票；
返回r；//序列化程序。将（发票，发票类型）反序列化为JsonResult；
}
[网络方法]
公共静态JsonResult GetVendorInvoiceDefaults（发票）
{
JavaScriptSerializer serializer=新的JavaScriptSerializer（）；
invoice.DistributionCode=“你好世界”；
JsonResult r=新的JsonResult（）；
r、 数据=发票；
返回r；
//返回新的JsonResult（）{Data=invoice}；
}
[网络方法]
公共静态JsonResult GetVendorCode（发票）
{
JavaScriptSerializer serializer=新的JavaScriptSerializer（）；
invoice.VendorCode=“AHM”；
JsonResult r=新的JsonResult（）；
r、 数据=发票；
返回r；
}
}
公共类发票
{
私有字符串分配代码；
私有字符串vendorcode；
公共字符串InvoiceNumber{get；set；}
公共字符串InvoiceDescription{get；set；}
公共字符串分配代码
{
得到
{
返回distributionCode？？字符串。为空；
}
设置
{
分配代码=值；
}
}
公共字符串卖方代码
{
得到
{
返回vendorcode？？字符串。空；
}
设置
{
vendorcode=值；
}
}
}
}

因此，您不应该在多个地方进行此调用，也不应该在多个地方进行此调用（每个div）

ko.applyBindings（MyProject.viewModel）。

应用viewmodel的绑定后，将应用这些绑定< script type="text/javascript" language='javascript'> var MyProject = {}; var viewModel; MyProject.viewModel = ""; var invoiceModel; $(document).ready(function InitializeInvoice() { $.ajax({ type: "Post", url: "Default.aspx/InitializeModel", data: {}, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: initializesinvoice }); function initializesinvoice(msg) { var defaultdata = msg.d.Data; invoiceModel = defaultdata; MyProject.viewModel = ko.mapping.fromJS(invoiceModel); ko.applyBindings(MyProject.viewModel) }; }) function GetVendorInvoiceDefaults() { MyProject.viewModel = JSON.stringify(invoiceModel); var data = '{invoice:' + MyProject.viewModel + '}'; $.ajax({ type: "Post", url: "Default.aspx/GetVendorInvoiceDefaults", data: data, contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: GetVendorInvoiceDefaultsSuccess }); } function GetVendorInvoiceDefaultsSuccess(msg) { var defaultdata = msg.d.Data; invoiceModel = defaultdata; MyProject.viewModel = ko.mapping.fromJS(invoiceModel); ko.applyBindings(MyProject.viewModel) }; function GetVendorCode() { var vendormodel = JSON.stringify(invoiceModel); var data = '{invoice:' + vendormodel + '}'; $.ajax({ type: "Post", url: "Default.aspx/GetVendorCode", data: '{invoice:' + vendormodel + '}', contentType: "application/json; charset=utf-8", dataType: "json", async: false, success: GetVendorCodeSucess }); } function GetVendorCodeSucess(msg) { var defaultdata = msg.d.Data; MyProject.viewModel = ko.mapping.fromJS(defaultdata); ko.applyBindings(MyProject.viewModel) }; #HTML# <p> Invoice Description <asp:TextBox ID="txtdesc" runat="server" data-bind="value:InvoiceDescription"> </asp:TextBox></p> <p> Distribution Code <asp:TextBox ID="txtdistcode" runat="server" data-bind="value:DistributionCode"></asp:TextBox></p> <p> Vendor Code <asp:TextBox ID="txtvendor" runat="server" data-bind="value:VendorCode" ></asp:TextBox></p> <p> <button onclick="InitializeInvoice()">InitializeInvoice</button></p> <p><button id="btndefaults" onclick="GetVendorInvoiceDefaults()">GetVendorInvoiceDefaults</button></p> <p><button id="btnvendor" onclick="GetVendorCode()">GetVendorCode</button><p> </pre> #ASPX file# namespace WebApplication9 { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected override void OnLoad(EventArgs e) { if (IsPostBack) { clientSideIsPostBack.Value = "Y"; } else clientSideIsPostBack.Value = "N"; base.OnLoad(e); } [WebMethod] public static JsonResult InitializeModel() { var Invoice = new Invoice() { InvoiceNumber = "1235", InvoiceDescription = "Hello World", DistributionCode = "" }; JsonResult r = new JsonResult(); r.Data = Invoice; return r; //serializer.Deserialize(Invoice, typeof(Invoice)) as JsonResult; } [WebMethod] public static JsonResult GetVendorInvoiceDefaults(Invoice invoice) { JavaScriptSerializer serializer = new JavaScriptSerializer(); invoice.DistributionCode = "HELLO WORLD"; JsonResult r = new JsonResult(); r.Data = invoice; return r; //return new JsonResult() { Data = invoice }; } [WebMethod] public static JsonResult GetVendorCode(Invoice invoice) { JavaScriptSerializer serializer = new JavaScriptSerializer(); invoice.VendorCode = "AHM"; JsonResult r = new JsonResult(); r.Data = invoice; return r; } } public class Invoice { private string distributionCode; private string vendorcode; public string InvoiceNumber { get; set; } public string InvoiceDescription { get; set; } public string DistributionCode { get { return distributionCode ?? string.Empty; } set { distributionCode = value; } } public string VendorCode { get { return vendorcode ?? string.Empty; } set { vendorcode = value; } } } }