Пропускная способность knockoutjs для множественных вызовов ajax

Question

У меня есть функция, которая делает вызов ajax для получения данных itnital и сохраняет его в viewmodel. Затем я передаю возвращенную модель просмотра (строгая данные) в другую функцию, которая делает другой вызов ajax и так далее. Каждая функция привязывается к событию кнопки onclick. Я мог только передать исходную модель представления другим функциям, когда я поместил ее в document.ready. данные, которые я получаю от каждой функции, на 100% правильны. Однако всякий раз, когда я привязываю viewmodel, он отменяет предыдущую привязку и значения не сохраняются. Я новичок в этом, поэтому, если я делаю что-то ужасно неправильно, пожалуйста, со мной. Ниже приведен код:

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).

После привязки для ViewModel есть применяются, они применяются. ВЫ НИКОГДА НЕ ПОВТОРИТЕ ЭТОТ ШАГ! Это очень важно. Когда значения в MyProject.viewModel обновляются, привязки автоматически обновляют HTML. В этом весь смысл. Когда вы вызываете applyBindings более одного раза, вы собираетесь создавать все виды неожиданного поведения.

Настройте свой режим просмотра, наложите символы один раз, а затем сделайте все остальные коды обновите правильную модель. Я рекомендую сделать это в обработчике document.readyдо делать что-нибудь еще, например, подключать материал ajaxy.

Во-вторых, при использовании Mapping плагин KO, per the documentation, обновить весь ViewModel так: ko.mapping.fromJS(data, viewModel); Calling MyProject.viewModel = ko.mapping.fromJS(invoiceModel); каждый раз, когда будет перезаписана ViewModel.

Это еще один ключевой аспект нокаута. Поскольку наблюдаемые значения являются функциями, вы обновляете их, передавая новое значение в качестве параметра, а не путем их перезаписи, как обычные переменные.

Справа:

viewModel.observable(newValue)

Неправильно:

viewModel.observable = newvalue