jQuery.my и MVVM

[ermouth]

$.my вместе с новым валидатором в полный рост реализует концепцию MVVM. Декларативное связывание реализовано даже круче чем в WPF где-то – контролы в UI “сидят” прямо на том-же объекте, что передан как данные и риалтайм его мутируют.

Обратное тоже верно – окружение формы может поменять данные под формой обычным яваскриптовым синтаксисом, сказать форме перерисоваться – и она перерисуется, отразив данные.

var data = {name:””, sex:””}; $(“#someform”).my(manifest, data); //init
data.name=”John”; $(“#someform”).my(“redraw”); // update

Соответственно, для всего остального кода значение объекта data будет меняться по мере изменения контролов.

MVVM как концепт, конечно, не без подводных камней. Вот сам Госсман, чувак который ввёл понятие MVVM пишет о некоторых “прелестях” MVVM в WPF. http://blogs.msdn.com/b/johngossman/archive/2006/03/04/543695.aspx

Оно, конечно, прожорливо, особенно если сохраняет undo-историю или подвязано к зеркальным контролам с частыми изменениями (слайдеры к примеру). Я это всё пронаблюдал, когда баловался с InfoPath и Silverlight.

jQuery.my, в отличие от WPF, для решения этой проблемы вводит дополнительный опциональный параметр связи между контролом и данными под ним – delay. И этот механизм подавляет на указанный период одинаковые события – байнд выполнится только по прошествии delay миллисекунд с последнего вызова. Если за это время был ещё вызов таймер сбросится и отсчёт начнётся снова.

Аккуратное регулирование этого параметра приводит к куче интерфейсных последствий. Вот пример http://jquerymy.com/s/delay078.html

Замечу, что код этого примера, манифест который всё рисует (включая html), содержательно занимает 9 строк.

{ params:{delay:3},	
  init:[
    {row:"550px", label:"150px", rowCss:"my-row pt8 pb8"}, 
    '<h3>Зеркально-зависимые контролы, 0.7.8</h3>',
    ["3 мс", "num#num", "sli#sli.w330.ml20"],
    ["100 мс", "num#num2", "sli#sli2.w330.ml20"]
  ],
  ui: {
    "#num":  {bind:"num",  watch:"#sli",  check:/^(100|\d{1,2})$/},
    "#sli":  {bind:"num",  watch:"#num"},
    "#num2": {bind:"num2", watch:"#sli2", delay:100, check:/^(100|\d{1,2})$/},
    "#sli2": {bind:"num2", watch:"#num2", delay:100}
}}

MVVM вопщем. InfoPath в браузере. Только там манифест, модель и схема данных раздельно жили, а у меня это единая конструкция.

Comments

[totally-psyched.livejournal.com]

я вот всё пытаюсь найти применение твоему плагину и никак не могу найти =) для data binding использую ractivejs.

может я что-то не понимаю?

[ermouth.livejournal.com]

что умеет $.my и не умеет ractive:
– единый манифест, который можно передать как json
– валидация данных на сервере только по манифесту
– умение обращаться не только со стандартными HTML-контролами без бубна

Ну и писанины кратно меньше.

[totally-psyched.livejournal.com]

а почему "form-centeric"?

[ermouth.livejournal.com]

исторически сложилось. изначально это всё писалось для оживления уже нарисованных форм с не только стандартными контролами.