Comments 47
Сумасшедший объём кода для подобного todo-приложения, даже несмотря на то, что это пример.
UFO landed and left these words here
да, оформлена документация кода и примера (todo) просто замечательно.
Это хорошо. Есть шанс, что при усложнении проекта количество кода будет расти не экспоненциально, а линейно.
Очень интересно. Я уже краем уха слыхал об этой библиотеке, но не пользовался. Недавно начал один небольшой проект, используя Sencha Touch, так там тоже сильная по возможностям MVC структура — очень понравилось манипулировать данными через модели, при этом каждая модель может сохранять данные разными способами.
Я думаю, что такой способ работы с JS в веб-приложениях — это следующий этап качественного веба.
Да и как-то православней, я считаю, обновлять данные через DOM, вместо того, чтобы сразу загружать данные с html кодом.
Мы тоже так думали. В конце концов отказались, т.к. отрисовка фронта с помощью шаблонов и подгрузкой данных с помощью JS превратилась в большие задержки на клиенте.
+ более сложная структура отображения фронта
+ больше кода.

Но последние 2 пункта были в нагрузку. Не приемлимы были 2-5 секунды рендеринга страницы(и это без учета подгрузки данных с сервера) на очень хороших клиентских системах.

UFO landed and left these words here
Элементов было около 25, но каждый из них являлась большой карточкой со множеством активных элементов, которые содержат в контекстном меню различные дополнительные данные.

Опять же, писать lasy и генерировать все это с помщью JS, как оказалось не выгодно(с точки зрения скорости разработки)
UFO landed and left these words here
UFO landed and left these words here
Использую knockoutjs уже несколько месяцев и не могу нарадоваться.
Понял что до этого страдал фигней :). Очень рекомендую всем.
UFO landed and left these words here
ну а что мешает использовать вместе?
это немного из другой оперы. Тут манипуляция данными, а не dom-объектами, как в jQuery.

knockoutjs выглядет очень интересно. Особенно для небольших приложений.
UFO landed and left these words here
UFO landed and left these words here
По мне так backbone сложнее и сильнее завязан на верстку.

Например следующий код перестанет отрабатывать, как только ссылку заменят кнопкой или просто сменят название класса. Такой подход не далеко ушел от jQuery.delegate

events: {
«click .todo-clear a»: «clearCompleted»
}

В knockoutjs все это находится в темплейте, т.е. в одном месте.
+ Очень просто связывать элементы формы. Меняешь значения переменной в модели, автоматом обновляется значение в текстовом поле и наоборот.
Я не придираюсь, конечно, но то, что вы называете видом, правильнее называется Представление. Модель—Представление—Контроллер, MVC.

За статью спасибо, разумеется.
Всегда думал, что это вид Модель-Вид-Контроллер — трудности перевода. Ещё MVC называют «Модель-представление-поведение». В тексте не буду уже менять.
UFO landed and left these words here
> Backbone.js это каркас для создания RIA JavaScript приложений, его автором является Jeremy Ashkenas, создатель CoffeeScript, Backbone является частью компании Document Cloud ей же «принадлежит» Undescrore.js.

Рискну кармой, но: извините, но я не смог этого понять.
Разработчики Document Cloud написали underscore.js, на его основе — Backbone, а еще CoffeeScript. Что тут непонятного?
Ну что фреймворк является частью компании как-то не по-русски звучит :)
отличная библиотека. Простая и мощная.
для большого проекта лучше все разбивать на отдельные файлы/директории и собирать в объект App(App.Models.Apple, App.Collections.Apples,...), который потом бы инициализировал контроллер.

также есть проект для поддержки взаимодействия в моделях
UFO landed and left these words here
Спасибо, за статью.
Сейчас плотно использую backbone для HTML5 приложения на iPad. В моем случае необходимо было сделать свой интерфейс не по гайдлайнам производителей. В целом очень понравилось.
Еще бонус в том, что будучи верстальщиком, мне удобно и понятно работать с этой библиотекой, и не приходится отвлекать программистов. Еще не пробовал Sencha Touch и jQuery Touch — это будут следующие этапы :)
Откуда у модели this.view, а у представления this.model? Не понял, где и как осуществляется связывание модели с представлением. Я надеюсь, существует возможность связать с одной моделью несколько представлений?
// TodoView слушает изменения модели и перерисовывает себя.
    // так как эта связь один-вид-одна-модель, то мы просто устанавливаем 
    // связь с моделью напрямую.
    initialize: function() {
      _.bindAll(this, 'render', 'close');
      this.model.bind('change', this.render);
      this.model.view = this;
    },

Как я понял все ноги отсюда растут. видимо _.bindAll() создаёт this.model в представление, а this.model.view = this создаёт this.view для модели, хотя не уверен что это хорошая практика для MVC (вернее уверен в обратном :) )

А судя по «так как эта связь один-вид-одна-модель» возможность связывать есть вплоть до «многие-модели-многие-виды» иначе бы, наверное, и заморачиваться не стоило.
Присваивание this.model.view, признаюсь, проглядел. Но про _.bindAll() очень сомнительно (из топика: «bindAll это метод Underscore, который связывает контекст this с функцией. Это особенно полезно в событиях.»). Навряд ли этот bindAll (который к тому же часть underscore, а не backbone) знает что-либо про view и модели.
Глобальный объект похоже, может практически всё знать о приложении. Но в библиотеках JS не силён, потому только предположение.
Сейчас все данные находятся в памяти приложения. Давайте сохраним их на сервер:
portal.save();

Вы ожидали что-то большее? AJAX? Одной строчкой мы отправляем запрос на сервер. Помните, что тип запроса меняется: если вы создаете новый объект, то будет отправлен POST запрос, иначе будет PUT.

А по какому урлу будет идти сохранение?

Тут мелькнула мысль, что Backbone может очень легко интегрироваться с CouchDB без какой-либо серверной прослойки и чуть-ли не без «выделенного» веб-сервера. Погуглил и оказалось что мысль не только у меня мелькнула, да не только мелкнула, но и реализовалась — github.com/janmonschke/backbone-couchdb. Ещё реализовать аутентификацию и авторизацию и почти готовая среда для разработки двухзвенных приложений.

Спасибо за статью.
За намёк спасибо. Хотя пример с portal.save(); до введения в коллекции у вас, потому и спросил. Видимо надо читать доки на предмет является ли коллекция обязательным отношением к модели и как формируется id (тоже прямо не указано).
Скажите пожалуйста где именно происходит связывание вида с моделью. В этом примере мне не понятно что такое this.model.
var GameView = Backbone.View.extend({
    initialize: function (args) {
        _.bindAll(this, 'changeName');
        this.model.bind('change:name', this.changeName);
    }
});
Контроллер связывается с моделью при инициализации контроллера. В том пред примере на самом деле не показано откуда берется this.model
Если посмотреть на «Пример: Список Todo», то все становится понятнее:
window.TodoView = Backbone.View.extend({
// ...
});

window.AppView = Backbone.View.extend({
// ...

// Создание элемента туду. Создаем вид и засовываем в `<ul>`
    addOne: function(todo) {
      var view = new TodoView({model: todo}); // <<<
      this.$("#todo-list").append(view.render().el);
    }

//...
});
Сам, недавно столкнулся с необходимостью превозмочь Backbone, сразу вспомнил про этот топик и решил от него оттолкнуться, но в результате всё пришлось понимать самому. За день я таки разобрался, что к чему, но на самом деле с контроллером всё в разы проще.
Как по мне то пример с тудушками с backbon'овского туториала не самый удачный, не затронут аспект контроллера, и его возможность работать с routes. Да и как основное приложение контроллер был бы более верным решением, т.к. через него более прозрачно проистекают все маннипуляции с данными и рендером вьюшек.
Да и забыл спросить. Это у меня что то неправильно с руками или это у backbone внутренний механизм такой? я заметил что если у AplicationView не определён элемент el : "какой то контейнер", то у этой вьюхи никогда не происходит вызов render(). Я сколько не дебажил, пока не прописывал в классе вьюхи что то типа el: 'body' в консоли не прописывалось моё сообщение element rendered.
Хранить this.view у модели — плохой паттерн, надо bind делать у view на прослушку событий (от коллекций и моделей)
А как происходит связывание вида с моделью?
Везде во view вызовы this.model, но не могу найти код, где вид узнает о своей модели.
Only those users with full accounts are able to leave comments. Log in, please.