knockout.js：AJAX呼び出しがユーザーコントロールにある場合のビューモデルを保存する場所

Question

ユーザーがページにいる間、ビューモデルをどこで保持しておくべきかを理解するのは苦労しています。私は、AJAXリクエストを作成し、usercontrolのコントロールにbingを適用するいくつかのusercontrolを持っています。私はマッピングプラグインを使用して私のviewmodelを設定しています。私はそのページに4〜5人のユーザーコントロールを持っています。私は変更を検出してサーバーに返すことができるように、ビューモデルをメモリに保持するのに苦労しています。現在、私はwindow.Model1プロパティに保存していますが、これは良い考えではありません。

誰かが私が変更を検出できるようにメモリ内のビューモデルを保持する最善の方法を教えていただけますか？それとも、私はそれを間違ってやっているのですか？このようなシナリオを扱う良い方法があります。

これはすべてのコードです。

ユーザーコントロール：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucCustomer.ascx.cs" Inherits="WebApplication2.UserControl.ucCustomer" %> 

<input data-bind="value: FirstName" /><br /> 
<span>FirstName: </span><span data-bind="text: FirstName"></span><br /> 
<input data-bind="value: FirstName" /><br /> 
<span>FirstName: </span><span data-bind="text: LastName"></span><br /> 

<script type="text/javascript"> 

    $.ajax({ 
     type: "POST", 
     url: "ws/GetData.asmx/GetCustomer", 
     cache: false, 
     contentType: "application/json; charset=utf-8", 
     data: "{}", 
     dataType: "json", 
     success: handleHtml, 
     error: ajaxFailed 
    }); 


    function handleHtml(data, status) { 

     var myViewModel = ko.mapping.fromJS(data.d); 
     window.myViewModel = myViewModel; 



     ko.applyBindings(myViewModel); 
    } 

    function ajaxFailed(xmlRequest) { 
     alert(xmlRequest.status + ' \n\r ' + 
       xmlRequest.statusText + '\n\r' + 
       xmlRequest.responseText); 
    } 

</script> 

ASPXページ：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %> 

<%@ Register Src="UserControl/ucCustomer.ascx" TagName="ucCustomer" TagPrefix="uc1" %> 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="Scripts/knockout.debug.js" type="text/javascript"></script> 
    <script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function SendDataBackToServer() { 
      var arrayList = new ArrayList(); 
      arraylist[0] = window.myViewModel; 
      arraylist[1] = window.myViewModel1; 
      arraylist[2] = window.myViewModel2; 

      //Make an AJAX call here and send arrayList back to server 
      return false; 
     } 

    </script> 
</asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <div id="dvCust"> 
     <uc1:ucCustomer ID="ucCustomer1" runat="server" /> 
    </div> 
    <div> 
     <button title="Send Data Back" onclick="JavaScript: return SendDataBackToServer();"> 
      Send Data Back To Server</button> 
    </div> 
</asp:Content> 

Webサービス：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using WebApplication2.DataModel; 

namespace WebApplication2.WS 
{ 
    /// <summary> 
    /// Summary description for GetData 
    /// </summary> 
    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [System.ComponentModel.ToolboxItem(false)] 
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService] 
    public class GetData : System.Web.Services.WebService 
    { 

     [WebMethod] 
     public Customer GetCustomer() 
     { 
      return new Customer 
      { 
       FirstName = "FName", 
       LastName = "LName" 
      }; 
     } 
    } 
} 

カスタマーモデル：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace WebApplication2.DataModel 
{ 
    public class Customer 
    { 
     public string FirstName { get; set; } 
     public string LastName { get; set; } 
    } 
} 

Answer 1

アプリの仕組みが不明です。これは、アプリケーションの主な機能ではなく、セカンダリタスクのノックアウトを使用してのみ表示されます。グローバルな名前空間を使うのがおそらく最良の解決策だと私は思う。

関数本体の外に変数を作成すると、その変数はグローバルスコープになります。したがって、名前空間var myknockoutnamespace = {}を選択し、必要な構造（複数のビューモデル、静的クラス、Konkaniコード実装など）を配置してください。

これは高レベルですが、答えは本当に簡単です。すべての作業を自分の一意の名前空間に収める限り、グローバルスコープの使用には何の問題もありません。

別の妥当な解決策は、jQuery .data() methodです。これを使用すると、データをDOMノードに関連付けることができます。それぞれのユーザーコントロールは、表示する必要がないDomノードを所有している場合もあれば、ビューモデルにバインドするノード（おそらく自分自身で試みたことがない場合もあります）である可能性があります。ページを離れるか、またはDom要素を削除すると、名前空間/ビューモデルが効果的に削除されます。これにより、DOM内部とグローバル名前空間の外にデータが保持されます。ノードセレクタを使用して、任意の場所に変数を呼び出すことができます。 $('#myusercontrolcontainer').data() //returns whatever data us associated to that dom node.

jQueryは、プラグインとjQueryUI全体でこれをデータ記憶方法として広範囲に使用します。

希望は役に立ちます。ハッピーコーディング