代码之家 › 专栏 › 技术社区 › Amir

MVVM在DHTML RIA应用程序中是否可能/可行(无Silverlight/WPF)?

dhtml mvvm json asp.net-mvc javascript

Amir · 技术社区 · 17 年前

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

所以我有一个理论/主张,DHTML中的MVVM是和 可行的

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

这个看起来像这样:

    
        <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元素上使用一些非标准属性,我定义了一个以及它将如何与我的 . 我创造了一个 javascript中的MVVM解析器 它解释非标准属性并将视图与表示ViewModel的JSON对象关联。

这个将是一个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");
            }
        }

模型

    
        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框架”是个好主意吗?

kaboom.codeplex.com .

4 回复 | 直到 15 年前

Amir 14 年前

这可能是链接到的好时机 knockout JS

backbone ,一个javascript MVC框架:

Adam 17 年前

Blog that details the feature

社区技术预览 codeplex

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

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

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

Justin Niessner 17 年前

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

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

Raciel R. 15 年前

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