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

Question

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

JavaScript

<

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;
            
            }
        }
        
    }
    }

Answer 1

因此，您永远不应在多个地方或不止一次（每个 div）拨打此电话ko.applyBindings(MyProject.viewModel).

一旦应用了视图模型的绑定，它们就会被应用。 您永远不要重复此步骤！ 这非常重要。当MyProject.viewModel 中的值更新时，绑定会自动更新 HTML。这就是重点。当你不止一次调用applyBindings 时，你会产生各种意想不到的行为。

设置您的视图模型，应用一次绑定，然后让所有其他代码正确更新视图模型。我建议在 document.ready 处理程序中执行此操作在执行其他任何操作之前，例如连接 ajaxy 的东西。

其次，当使用 KO Mapping 插件 per the documentation 时，您会像这样更新整个视图模型：ko.mapping.fromJS(data, viewModel); 每次调用 MyProject.viewModel = ko.mapping.fromJS(invoiceModel); 都会覆盖您的视图模型。

这是 Knockout 的另一个关键方面。因为可观察对象是函数，所以您可以通过将新值作为参数传递来更新它们，而不是像普通变量那样覆盖它们。

对：

viewModel.observable(newValue)

错误：

viewModel.observable = newvalue