MVVM 在 DHTML RIA 应用程序中是否可行/可行（无 Silverlight/WPF）？
注意：这是一个冗长的问题，需要很好地理解 MVVM“设计模式”、JSON 和 jQuery...
所以我有一个理论/声明，DHTML 中的 MVVM 是可能并且<强>可行并想知道您是否同意/不同意我的观点以及原因。 在 DHTML 中实现 MVVM 围绕使用 ajax 调用返回 JSON 的服务器实体，然后通过 javascript 使用 html 操作来控制 html。
所以要把它分解掉。 假设我正在构建一个搜索页面，用于在数据库中搜索人员......
View 看起来像这样：
<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 作为静态外观
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。
Note: This is a long winded question and requires a good understanding of the MVVM "design pattern", JSON and jQuery....
So I have a theory/claim that MVVM in DHTML is possible and viable and want to know if you agree/disagree with me and why. Implementing MVVM in DHTML revolves around using ajax calls to a server entity that returns JSON and then using html manipulation via javascript to control the html.
So to break it down. Lets say I'm building a search page that searches for People in a database.....
The View would look something like this:
<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>
Using some non standard attributes on my html elements, I have declaritively defined a View and how it will interact with my ViewModel. I've created a MVVM parser in javascript that interprets the non-standard attributes and associates the View with a JSON object that represents the ViewModel.
The ViewModel would be a JSON object:
//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");
}
}
The Model can be any server side asset that returns JSON...in this example, I used asp MVC as a restful facade:
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);
}
So, again the question:
Is MVVM possible/viable in a DHTML RIA application (no Silverlight/WPF) or have I lost my mind?
Could this "MVVM framework" be a good idea?
Proof of Concept: kaboom.codeplex.com.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
看一下 .NET 4.0 中的 ASP.NET 数据绑定功能 - 随 Visual Studio 2010 一起提供。如果您熟悉 MS 技术，这正是您正在寻找的功能。
博客详细介绍了该功能
codeplex 上的社区技术预览
理论上，您可以只包含 HTML 文件中的 ASP.NET AJAX js 文件 & 使解决方案跨平台。
因此，直接回答你的问题 - 它绝对是创建可维护、松散耦合的 Web 用户界面问题的可行解决方案。 是的，应用程序的服务器端做得更少 - 它更像是一个真正的服务层，它处理的只是数据交换。 这实际上是一件好事，因为它促进了跨客户端的重用。 想象一下您的 WPF 应用程序和 Web 应用程序使用相同的中间层服务器来发送/接收数据？ 无论如何，客户端拥有大量可用的处理能力 - 为什么不利用它来使您的解决方案更具可扩展性（服务器执行的操作越少，客户端执行的工作就越多，这些工作分布在所有客户端上）
棘手的部分是两种方式绑定- 您可以在其中挂钩某些对象已更改的事件，以及用户界面中的某些内容已更改的事件（例如，用户在输入控件中键入某些内容）。 一种绑定方式仍然有用。
微软似乎是目前唯一一家按照您想要的模式构建完整解决方案的公司。 Yahoo 的 YUI 库确实执行半一致的数据绑定，但与您构建的 WPF/Silverlight 的模式不同。
Take a look at the ASP.NET data binding features in .NET 4.0 - comes out with Visual Studio 2010. This is exactly what you are looking for if you are ok with MS technology.
Blog that details the feature
Community technology preview on codeplex
Theoretically you could just include the ASP.NET AJAX js file from your HTML files & make the solution cross-platform.
So to directly answer your question - it absolutely is a viable solution to the problem of creating maintainable, loosely coupled web user interfaces. And yes, the server side of your application is doing less - it becomes more of a true service layer, where all it deals with is data exchange. This is actually a good thing, b/c it promotes reuse across clients. Imagine your WPF app and your web app using the same middle tier server to send/receive data? Clients have a lot of available processing power anyway - why not leverage it to make you solution more scalable (the less the server is doing, the more work your clients are doing, which is distributed across ALL clients)
The tricky part is two way binding - where you hook into the event that some object had changed, and the event that something in the user interface has changed (user typed something into an input control, for example). One way binding would still be useful.
It seems like Microsoft is the only company right now building a full solution in the pattern you want. Yahoo's YUI library does do data binding that is semi-coherent, but not in the same pattern as WPF/Silverlight like you have built.
它看起来是可能且可行的，唯一的缺点是您的代码依赖于大量的客户端处理来获得最终结果。
在我看来，使用服务器端 MVC 架构仍然比尝试创建客户端 MVVM 框架要好得多。
It looks possible and viable, with the only downside being that your code is relying on a whole lot of client side processing to get to the end result.
In my opinion, you're still a whole lot better of using a server side MVC architecture rather than trying to create a client side MVVM framework.
我使用类似的概念并添加了 JQuery 模板和 DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx) 的方程式为一种拥有干净视图和声明性绑定的方法（绑定部分给我带来了一些问题，但我认为它可能工作得很好）。
在我必须异步使用服务的场景中使用它，我真的很喜欢它。
我想知道你的 MVVM 解析器是什么样子，我使用了 pub/sub 插件进行通信。
I'm using a similar concept and added JQuery Templating & DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted-as-official-jquery-plugins.aspx) to the equation as a way to have clean views and declarative binding (the binding part is giving me some problems, but I think it might work fine).
Using this in an scenario where I have to consume services async, and I'm really liking it.
I'm wondering how your MVVM Parser looks like, I used a pub/sub plugin for communications.
这可能是链接到 knockout JS 的好时机，它是一个 javascript mvvm 框架。
您可能还想查看 backbone，一个 javascript MVC 框架：
This would probably be a good time to link to knockout JS, which is a javascript mvvm framework.
You may also want to look at backbone, a javascript MVC framework: