0

我很难理解当用户在页面上时我在哪里保留视图模型。我有几个用户控件发出 AJAX 请求并将绑定应用于用户控件中的控件。我正在使用映射插件来填充我的视图模型。我在页面上有 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>

页面：

<%@ 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>

网络服务：

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

1 回答 1

0

不确定您的应用程序如何工作。看来您只是将淘汰赛用于次要任务，而不是应用程序的主要功能。我认为使用全局命名空间可能是最好的解决方案。

如果您在函数体之外创建变量，则该变量在全局范围内。所以选择一个命名空间var myknockoutnamespace = {}，然后将您需要的任何结构放入其中（多个视图模型、静态类、Konkani 代码实现等......）

我知道这是高级别的，但答案真的很简单。只要您将所有工作都保存在自己独特的命名空间中，使用全局范围就没有任何问题。

另一个合理的解决方案是jQuery .data() 方法。使用它，您可以将数据与 DOM 节点相关联。您的每个用户控件都可以拥有一个甚至不需要可见的 Dom 节点，或者，它可能是您绑定到视图模型的节点（也许，我自己从未尝试过）。离开页面或删除 Dom 元素会有效地删除您的命名空间/视图模型。这将数据保留在 DOM 内部和全局命名空间之外。您可以使用节点选择器在任何地方调用变量。 $('#myusercontrolcontainer').data() //returns whatever data us associated to that dom node.

jQuery，在整个插件和 jQueryUI 中广泛使用它作为其数据存储方法。

希望是有帮助的。快乐编码

于 2012-03-23T01:51:27.170 回答