2009-07-15 35 views
17

Lưu ý: Đây là một câu hỏi hơi dài và đòi hỏi một sự hiểu biết tốt về MVVM "mẫu thiết kế", JSON và jQuery ....MVVM có khả thi/khả thi trong ứng dụng DHTML RIA (không có Silverlight/WPF) không?

Vì vậy, tôi có một lý thuyết/tuyên bố rằng MVVM trong DHTML là thểkhả thi và muốn biết liệu bạn có đồng ý/không đồng ý với tôi và tại sao không. Việc triển khai MVVM trong DHTML xoay quanh việc sử dụng các cuộc gọi ajax đến một thực thể máy chủ trả về JSON và sau đó sử dụng thao tác html thông qua javascript để điều khiển html.

Vì vậy, để chia nhỏ. Hãy nói rằng tôi đang xây dựng một trang tìm kiếm để tìm kiếm cho dân trong một cơ sở dữ liệu .....

Các Xem sẽ giống như thế này:

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

Sử dụng một số tiêu chuẩn không tính vào html của tôi các yếu tố, tôi đã xác định một cách rõ ràng một Xem và cách nó sẽ tương tác với ViewModel của tôi. Tôi đã tạo một trình phân tích cú pháp MVVM trong javascript giải thích các thuộc tính không chuẩn và liên kết Chế độ xem với đối tượng JSON đại diện cho ViewModel.

Các ViewModel sẽ là một đối tượng 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"); 
      } 
     } 
 

Các Mẫu thể được bất kỳ tài sản phía máy chủ trả về JSON ... trong ví dụ này, tôi sử dụng asp MVC như một mặt tiền yên tĩnh:

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

Vì vậy, một lần nữa câu hỏi:
là MVVM thể/khả thi trong một ứng dụng DHTML RIA (không Silverlight/WPF) hay tôi đã mất trí?

"Khung MVVM" có thể là một ý tưởng hay không?

Bằng chứng về khái niệm: kaboom.codeplex.com.

Trả lời

10

Đây có thể là thời điểm tốt để liên kết với knockout JS, đây là khung mvvm javascript.

Bạn cũng có thể muốn xem xét backbone, một khung MVC javascript:

1

Dường như có thể và khả thi, với nhược điểm duy nhất là mã của bạn dựa trên toàn bộ quá trình xử lý phía máy khách để có được kết quả cuối cùng.

Theo tôi, bạn vẫn còn tốt hơn rất nhiều khi sử dụng kiến ​​trúc MVC phía máy chủ thay vì cố tạo khung MVVM phía máy khách.

+0

"Theo tôi, bạn vẫn tốt hơn rất nhiều toàn bộ của việc sử dụng một kiến ​​trúc phía máy chủ MVC hơn là cố gắng để tạo ra một MVVM phía khách hàng khuôn khổ ". Yea ... không có nghĩa là bạn muốn làm cho toàn bộ trang web của bạn sử dụng loại cơ sở hạ tầng này ... nhưng khi thực hiện tương tác không đồng bộ, MIGHT này là một lựa chọn tốt hơn so với MVC. – Amir

+0

Đồng ý. Nó có thể gây nhầm lẫn giữa các khung công tác phía máy khách như thế này với các khung công tác phía máy chủ như MVC (nếu cú ​​pháp và đánh dấu trang tương tự) ... nhưng đó không phải là lý do đủ tốt để không cho nó bắn. –

+0

Cảm ơn bạn đã nhập. Đôi khi tôi cảm thấy như tôi đang ở trong một buồng echo và đầu vào của bạn được đánh giá cao. – Amir

3

Hãy xem các tính năng liên kết dữ liệu ASP.NET trong .NET 4.0 - đi kèm với Visual Studio 2010. Đây chính xác là những gì bạn đang tìm kiếm nếu bạn đồng ý với công nghệ MS. xem trước công nghệ

Blog that details the feature

Cộng đồng trên codeplex

Về mặt lý thuyết bạn chỉ có thể bao gồm file ASP.NET AJAX js từ các tập tin HTML của bạn & làm cho giải pháp đa nền tảng.

Vì vậy, để trực tiếp trả lời câu hỏi của bạn - nó hoàn toàn là giải pháp khả thi cho vấn đề tạo giao diện người dùng web có thể duy trì, lỏng lẻo. Và có, phía máy chủ của ứng dụng của bạn đang làm ít hơn - nó trở thành nhiều hơn một lớp dịch vụ thực sự, nơi mà tất cả các giao dịch đó là trao đổi dữ liệu. Điều này thực sự là một điều tốt, b/c nó khuyến khích tái sử dụng trên các khách hàng. Hãy tưởng tượng ứng dụng WPF của bạn và ứng dụng web của bạn sử dụng cùng một máy chủ tầng giữa để gửi/nhận dữ liệu? Khách hàng có rất nhiều sức mạnh xử lý sẵn có - tại sao không tận dụng nó để làm cho bạn giải pháp dễ mở rộng hơn (máy chủ ít hoạt động hơn, công việc của khách hàng của bạn càng nhiều hơn, được phân phối trên tất cả khách hàng)

Phần khó khăn là hai cách ràng buộc - nơi bạn móc vào sự kiện mà một số đối tượng đã thay đổi, và sự kiện mà một cái gì đó trong giao diện người dùng đã thay đổi (người dùng gõ một cái gì đó vào một điều khiển đầu vào, ví dụ). Một cách ràng buộc sẽ vẫn hữu ích.

Có vẻ như Microsoft là công ty duy nhất hiện đang xây dựng một giải pháp đầy đủ theo mẫu bạn muốn. Thư viện YUI của Yahoo không thực hiện việc liên kết dữ liệu bán kết hợp, nhưng không có cùng mẫu với WPF/Silverlight như bạn đã xây dựng.

+1

Đó là thực sự thực sự tốt đẹp. Tôi hơi ngại khi bị trói buộc vào AdoDotNetDataContext. Tôi sẽ thực hiện một cách tiếp cận trình cắm thêm jQuery vào khung làm việc để thực hiện MVVM của tôi. – Amir

+0

Những ngày này, được ok với công nghệ MS giống như là ok với cái chết đen. – Jeff

1

Tôi đang sử dụng khái niệm tương tự và thêm JQuery Templating & DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization- được chấp nhận-as-official-jquery-plugins.aspx) cho phương trình như một cách để có quan điểm rõ ràng và ràng buộc khai báo (phần ràng buộc là cho tôi một số vấn đề, nhưng tôi nghĩ rằng nó có thể làm việc tốt).

Sử dụng tính năng này trong trường hợp tôi phải sử dụng dịch vụ không đồng bộ và tôi thực sự thích nó.

Tôi tự hỏi cách trình phân tích cú pháp MVVM của bạn trông như thế nào, tôi đã sử dụng plugin pub/sub để liên lạc.

Các vấn đề liên quan