Подтвердить что ты не робот

Возможно ли MVVM/жизнеспособное в приложении DHTML RIA (без Silverlight/WPF)?

Примечание. Это длинный вопрос и требует хорошего понимания шаблона проектирования MVVM, JSON и jQuery....

Итак, у меня есть теория/утверждение, что MVVM в DHTML возможно и жизнеспособный и хочу знать, согласны ли вы/не согласны со мной и почему. Внедрение MVVM в DHTML вращается вокруг, используя ajax-вызовы на серверный объект, который возвращает JSON, а затем используя html-манипуляцию через javascript для управления html.

Так сломать. Предположим, что я строю страницу поиска, которая ищет людей в базе данных.....

Вид будет выглядеть примерно так:

    
        <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, я декларативно определил Вид и как он будет взаимодействовать с моей ViewModel. Я создал синтаксический анализатор MVVM в javascript, который интерпретирует нестандартные атрибуты и связывает представление с объектом JSON, представляющим ViewModel.

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

Модель может быть любым ресурсом на стороне сервера, который возвращает 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.

4b9b3361

Ответ 1

Вероятно, это будет подходящее время для ссылки на нокаут JS, который представляет собой фреймворк mvvm javascript.

Вы также можете посмотреть backbone, javascript MVC framework:

Ответ 2

Взгляните на функции привязки данных ASP.NET в .NET 4.0 - выходит с Visual Studio 2010. Это именно то, что вы ищете, если вы в порядке с технологией MS.

Блог, в котором подробно описывается функция

Предварительный просмотр технологии сообщества на codeplex

Теоретически вы можете просто добавить js файл ASP.NET AJAX из своих HTML файлов и сделать решение кросс-платформенным.

Итак, чтобы прямо ответить на ваш вопрос - это абсолютно жизнеспособное решение проблемы создания поддерживаемых, слабо связанных веб-пользовательских интерфейсов. И да, серверная часть вашего приложения делает меньше - он становится скорее истинным уровнем сервиса, где все, с чем он имеет дело, - это обмен данными. На самом деле это хорошо, b/c это способствует повторному использованию клиентов. Представьте, что ваше приложение WPF и ваше веб-приложение используют один и тот же сервер среднего уровня для отправки/получения данных? В любом случае у клиентов есть много доступной вычислительной мощности - почему бы не использовать его, чтобы сделать ваше решение более масштабируемым (чем меньше сервер делает, тем больше работы ваши клиенты делают, который распространяется по всем клиентам).

Сложная часть - это двусторонняя привязка - где вы подключаетесь к событию, которое изменил какой-то объект, и событию, которое изменило что-то в пользовательском интерфейсе (например, пользователь набрал что-то в элемент управления вводом). Односторонняя привязка по-прежнему будет полезна.

Похоже, что Microsoft - единственная компания, которая сейчас строит полное решение в шаблоне, который вы хотите. Yahoo YUI библиотека делает привязку данных, которая является полукогерентной, но не такой же, как WPF/Silverlight, как вы создали.

Ответ 3

Это выглядит возможным и жизнеспособным, при этом единственным недостатком является то, что ваш код опирается на обработку большого количества клиентских файлов, чтобы получить конечный результат.

На мой взгляд, вы все еще намного лучше используете архитектуру MVC на стороне сервера, а не пытаетесь создать среду MVVM на стороне клиента.

Ответ 4

Я использую аналогичную концепцию и добавил JQuery Templating и DataLink (http://weblogs.asp.net/scottgu/archive/2010/10/04/jquery-templates-data-link-and-globalization-accepted -as-official-jquery-plugins.aspx) к уравнению как способ иметь чистые представления и декларативное связывание (связующая часть дает мне некоторые проблемы, но я думаю, что это может сработать нормально).

Используя это в сценарии, где мне нужно использовать службы async, и мне это очень нравится.

Мне интересно, как выглядит ваш MVVM Parser, я использовал паб/дополнительный плагин для связи.