Недавно делал сложный интерфейс. В поисках серебряной пули, которая облегчит исполнение задачи, были перекопаны несколько фреймворков ( Sproutcore, Knockoutjs, MooTools, Ext4, YUI). Казалось, какой либо из них облегчит сильно задачу и выбор пал, как ни странно на Knockoutjs, который весьма молод. В теории и изготовлении Hello world примеров, нокаут конечно был эффективен и соблазнителен. Однако косяки, как обычно, начались потом. Ключевые моменты фреймворка:
- Декларативная привязка модели к UI.
Пишем модель
<span data-bind="text:sometext"></span>
в span появляется Hello world.
Удобно, черт возьми. Вот input.
<input data-bind="value:sometext"></span>
Тут мы можем уже менять значение поля sometext нашей модели.
Однако, если мы его поменяем изменения не отразятся в модели и соответственно в этом спане <span data-bind="text:sometext"></span>.
- Взаимозависимость. Binding.
А вот если мы сделаем поле модели observable.
А если нам нужен какой то специфический контрол ? Например слайдер. Вот тут придется помучиться с созданием custom binding.
В конечном итоге наша модель байндится к нашей View( которая обычный html файл), ko.applyBindings(Model).
Предпочтительный способ создания модели через конструктор и new. При сложном интерфейсе придется создавать не одну модель, а вот байндить можно только одну. То есть основная модель служит как бы агрегатором для других. Тут же опять возникают определенные сложности ибо приходится создавать классы, конструкторы и прочие прелести ООП и все это через призму примочек самого фреймворка.
Итог, каша в голове и вместо простого и легкого способа создать сложный интерфейс имеем кучу кода, который непонятно как работает.
- Декларативная привязка модели к UI.
Пишем модель
var Model = {
sometext:"Hello world"
}привязываем поле модели к узлу DOM.<span data-bind="text:sometext"></span>
в span появляется Hello world.
Удобно, черт возьми. Вот input.
<input data-bind="value:sometext"></span>
Тут мы можем уже менять значение поля sometext нашей модели.
Однако, если мы его поменяем изменения не отразятся в модели и соответственно в этом спане <span data-bind="text:sometext"></span>.
- Взаимозависимость. Binding.
А вот если мы сделаем поле модели observable.
var Model = {
sometext: ko.observable("Hello world")
}
Тогда после изменения в инпуте, значение в модели поменяется и отобразится в спане. Таким образом между спаном и инпутом есть некий байндинг, через модель. Изменяя значение поля объекта, изменения сразу же отображаются в UI. Смотрится красиво. А если нам нужен какой то специфический контрол ? Например слайдер. Вот тут придется помучиться с созданием custom binding.
В конечном итоге наша модель байндится к нашей View( которая обычный html файл), ko.applyBindings(Model).
Предпочтительный способ создания модели через конструктор и new. При сложном интерфейсе придется создавать не одну модель, а вот байндить можно только одну. То есть основная модель служит как бы агрегатором для других. Тут же опять возникают определенные сложности ибо приходится создавать классы, конструкторы и прочие прелести ООП и все это через призму примочек самого фреймворка.
Итог, каша в голове и вместо простого и легкого способа создать сложный интерфейс имеем кучу кода, который непонятно как работает.
