【问题标题】:Is MVVM possible/viable in a DHTML RIA application (no Silverlight/WPF)?MVVM 在 DHTML RIA 应用程序(无 Silverlight/WPF)中是否可行/可行?
【发布时间】:2010-11-11 02:25:36
【问题描述】:

注意:这是一个冗长的问题,需要很好地理解 MVVM“设计模式”、JSON 和 jQuery....

所以我有一个理论/主张,即 DHTML 中的 MVVM 可能可行,并且想知道您是否同意/不同意我的观点以及原因。在 DHTML 中实现 MVVM 围绕使用 ajax 调用返回 JSON 的服务器实体,然后通过 javascript 使用 html 操作来控制 html。

所以把它分解。假设我正在构建一个在数据库中搜索 People 的搜索页面.....

视图看起来像这样:

<body viewmodel="SearchViewModel"> Search:<br /> <input type="text" bindto="SearchString" /><br /> <input type="button" value="Search" command="Search" /> <br /> <table bindto="SearchResults"> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>${FirstName}</td> <td>${LastName}</td> </tr> </tbody> </table> </body>

在我的 html 元素上使用一些非标准属性,我已经声明性地定义了一个 View 以及它将如何与我的 ViewModel 交互。我在 javascript 中创建了一个 MVVM 解析器,它解释非标准属性并将 View 与代表 ViewModel 的 JSON 对象相关联。

ViewModel 将是一个 JSON 对象:

//View Model SearchViewModel would be assocaited with View because of <body viewmodel="SearchViewModel"> var SearchViewModel = { //SearchString variable has a TwoWay binding //to <input type="text" bindto="SearchString" />< //if a user types into the text box, the SearchString property will "auto-magically" be updated //because of the two way binding and how the element was interpreted via my MVVM parser SearchString: '', //SearchResults has a OneWay binding to <table bindto="SearchResults"> SearchResults: new Array(), //Search function will get "auto-magically" get called because of //the command binding to <input type="button" command="Search" /> Search: function() { //using jquery to call into the server asynchronously //when the server call is completed, the PopulateSearchResults method will be called $.getJSON("www.example.com/SearchForPerson", { searchString: SearchViewModel.SearchString }, SearchViewModel.PopulateSearchResults); } PopulateSearchResults: function(data) { //set the JSON array SearchViewModel.SearchResults = data; //simulate INotifyPropertyChanged using the MVVM parser mvvmParser.notifyPropertyChanged("SearchResults"); } }

Model 可以是任何返回 JSON 的服务器端资产...在这个例子中,我使用了 asp MVC 作为一个 restful 外观:

public JsonResult SearchForPerson(string searchString) { PersonDataContext personDataContext = new PersonDataContext(); //linq to sql..... //search for person List<Person> results = personDataContext.Persons .Where(p => p.FirstName.Contains(searchString) || p.LastName.Contains(searchString)) .ToList(); return Json(results); }

那么,问题又来了:
MVVM 在 DHTML RIA 应用程序(没有 Silverlight/WPF)中是否可行/可行,还是我失去了理智?

这个“MVVM 框架”是个好主意吗?

概念证明:kaboom.codeplex.com

【问题讨论】:

    标签: javascript asp.net-mvc json mvvm dhtml


    【解决方案1】:

    这可能是链接到 knockout JS 的好时机,这是一个 javascript mvvm 框架。

    你可能还想看看backbone,一个javascript MVC框架:

    【讨论】:

      【解决方案2】:

      看看 .NET 4.0 中的 ASP.NET 数据绑定功能 - 随 Visual Studio 2010 提供。如果您对 MS 技术没问题,这正是您所寻找的。​​p>

      Blog that details the feature

      codeplex上的社区技术预览

      理论上,您可以只从 HTML 文件中包含 ASP.NET AJAX js 文件,并使解决方案跨平台。

      因此,直接回答您的问题 - 它绝对是解决创建可维护、松散耦合的 Web 用户界面问题的可行解决方案。是的,你的应用程序的服务器端做得更少——它更像是一个真正的服务层,它所处理的只是数据交换。这实际上是一件好事,b/c 它促进了客户之间的重用。想象一下您的 WPF 应用程序和您的 Web 应用程序使用相同的中间层服务器来发送/接收数据?无论如何,客户端都有很多可用的处理能力 - 为什么不利用它来使您的解决方案更具可扩展性(服务器做的越少,您的客户端做的工作就越多,分布在所有客户端上)

      棘手的部分是两种方式的绑定——您可以在其中挂钩某个对象已更改的事件,以及用户界面中的某些内容已更改的事件(例如,用户在输入控件中键入了某些内容)。一种方式绑定仍然有用。

      似乎微软是目前唯一一家按照您想要的模式构建完整解决方案的公司。 Yahoo 的 YUI 库确实进行了半连贯的数据绑定,但与您构建的 WPF/Silverlight 的模式不同。

      【讨论】:

      • 这真的很好。我对被绑定到 AdoDotNetDataContext 有点不安。我打算对我的 MVVM 实现的框架采用 jQuery 插件方法。
      • 现在,可以接受 MS 技术就像可以接受黑死病。
      【解决方案3】:

      它看起来可行且可行,唯一的缺点是您的代码依赖于大量客户端处理来获得最终结果。

      在我看来,使用服务器端 MVC 架构比尝试创建客户端 MVVM 框架要好得多。

      【讨论】:

      • “在我看来,使用服务器端 MVC 架构比尝试创建客户端 MVVM 框架要好得多”。是的...绝不会让您的整个网站使用这种基础架构...但是在进行异步交互时,这可能是比 MVC 更好的选择。
      • 同意。将像这样的客户端框架与像 MVC 这样的服务器端框架混合起来可能会让人感到困惑(如果语法和页面标记看起来相似)......但这并不是不试一试的充分理由。
      • 感谢您的意见。有时我觉得我在回音室中,非常感谢您的意见。
      • 有时大声说出来是验证它的最佳方式。
      【解决方案4】:

      我正在使用类似的概念并添加了 JQuery 模板和数据链接 (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted -as-official-jquery-plugins.aspx) 到等式中,作为获得干净视图和声明性绑定的一种方式(绑定部分给我带来了一些问题,但我认为它可能工作正常)。

      在我必须异步使用服务的场景中使用它,我真的很喜欢它。

      我想知道您的 MVVM 解析器长什么样,我使用了一个 pub/sub 插件进行通信。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-03-10
        • 2011-10-15
        • 1970-01-01
        • 2012-10-18
        • 2010-09-22
        • 1970-01-01
        • 2011-03-17
        • 1970-01-01
        相关资源
        最近更新 更多