Примечание. Это длинный вопрос, требующий хорошего понимания «шаблона проектирования» MVSM, JSON и jQuery ....
Итак, у меня есть теория / утверждение, что MVVM в DHTML возможен и жизнеспособен и хочу знать, согласны ли вы со мной или нет и почему. Реализация MVVM в DHTML вращается вокруг использования ajax-вызовов к объекту сервера, который возвращает JSON, и затем использования html-манипуляции через javascript для управления html.
Так, чтобы сломать это. Допустим, я создаю страницу поиска, которая ищет людей в базе данных .....
View будет выглядеть примерно так:
<body <strong>viewmodel="SearchViewModel"</strong>>
Search:<br />
<input type="text" <strong>bindto="SearchString"</strong> /><br />
<input type="button" value="Search" <strong>command="Search"</strong> />
<br />
<table <strong>bindto="SearchResults"</strong>>
<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 . Я создал синтаксический анализатор MVVM в javascript , который интерпретирует нестандартные атрибуты и связывает представление с объектом JSON, представляющим модель представления.
ViewModel будет объектом JSON:
//View Model SearchViewModel would be assocaited with View because of <body <strong>viewmodel="SearchViewModel"</strong>>
var SearchViewModel = {
//SearchString variable has a TwoWay binding
//to <input type="text" <strong>bindto="SearchString"</strong> /><
//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 <strong>MVVM parser</strong>
SearchString: '',
//SearchResults has a OneWay binding to <table <strong>bindto="SearchResults"</strong>>
SearchResults: new Array(),
//Search function will get "auto-magically" get called because of
//the command binding to <input type="button" <strong>command="Search"</strong> />
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;
//<strong>simulate INotifyPropertyChanged using the MVVM parser</strong>
mvvmParser.notifyPropertyChanged("SearchResults");
}
}
Модель может быть любым ресурсом на стороне сервера, который возвращает 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 .