azproduction5 мая 2011 в 15:15

Написание сложных интерфейсов с Backbone.js

13 мин

101K

JavaScript *

+97

Комментарии 47

theOnlyBoy 5 мая 2011 в 15:39

Сумасшедший объём кода для подобного todo-приложения, даже несмотря на то, что это пример.

НЛО прилетело и опубликовало эту надпись здесь

trevel 5 мая 2011 в 20:37

да, оформлена документация кода и примера (todo) просто замечательно.

StopDesign 6 мая 2011 в 04:52

Это хорошо. Есть шанс, что при усложнении проекта количество кода будет расти не экспоненциально, а линейно.

icegreenberry 5 мая 2011 в 16:00

Очень интересно. Я уже краем уха слыхал об этой библиотеке, но не пользовался. Недавно начал один небольшой проект, используя Sencha Touch, так там тоже сильная по возможностям MVC структура — очень понравилось манипулировать данными через модели, при этом каждая модель может сохранять данные разными способами.
Я думаю, что такой способ работы с JS в веб-приложениях — это следующий этап качественного веба.
Да и как-то православней, я считаю, обновлять данные через DOM, вместо того, чтобы сразу загружать данные с html кодом.

SowingSadness 5 мая 2011 в 16:06

Мы тоже так думали. В конце концов отказались, т.к. отрисовка фронта с помощью шаблонов и подгрузкой данных с помощью JS превратилась в большие задержки на клиенте.
+ более сложная структура отображения фронта
+ больше кода.

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

НЛО прилетело и опубликовало эту надпись здесь

SowingSadness 5 мая 2011 в 22:48

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

Опять же, писать lasy и генерировать все это с помщью JS, как оказалось не выгодно(с точки зрения скорости разработки)

НЛО прилетело и опубликовало эту надпись здесь

RayMan 5 мая 2011 в 16:11

Использую knockoutjs уже несколько месяцев и не могу нарадоваться.
Понял что до этого страдал фигней :). Очень рекомендую всем.

НЛО прилетело и опубликовало эту надпись здесь

trevel 5 мая 2011 в 16:22

ну а что мешает использовать вместе?
это немного из другой оперы. Тут манипуляция данными, а не dom-объектами, как в jQuery.

knockoutjs выглядет очень интересно. Особенно для небольших приложений.

НЛО прилетело и опубликовало эту надпись здесь

azproduction 5 мая 2011 в 16:23

Заинтриговали — полез смотреть

НЛО прилетело и опубликовало эту надпись здесь

RayMan 5 мая 2011 в 17:37

По мне так backbone сложнее и сильнее завязан на верстку.

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

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

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

ognevsky 5 мая 2011 в 16:08

Я не придираюсь, конечно, но то, что вы называете видом, правильнее называется Представление. Модель—Представление—Контроллер, MVC.

За статью спасибо, разумеется.

azproduction 5 мая 2011 в 16:22

Всегда думал, что это вид Модель-Вид-Контроллер — трудности перевода. Ещё MVC называют «Модель-представление-поведение». В тексте не буду уже менять.

НЛО прилетело и опубликовало эту надпись здесь

Obramko 5 мая 2011 в 16:09

> Backbone.js это каркас для создания RIA JavaScript приложений, его автором является Jeremy Ashkenas, создатель CoffeeScript, Backbone является частью компании Document Cloud ей же «принадлежит» Undescrore.js.

Рискну кармой, но: извините, но я не смог этого понять.

ognevsky 5 мая 2011 в 16:18

Разработчики Document Cloud написали underscore.js, на его основе — Backbone, а еще CoffeeScript. Что тут непонятного?

VolCh 7 мая 2011 в 13:39

Ну что фреймворк является частью компании как-то не по-русски звучит :)

trevel 5 мая 2011 в 16:09

отличная библиотека. Простая и мощная.
для большого проекта лучше все разбивать на отдельные файлы/директории и собирать в объект App(App.Models.Apple, App.Collections.Apples,...), который потом бы инициализировал контроллер.

также есть проект для поддержки взаимодействия в моделях

TreyLav 5 мая 2011 в 16:16

Spinefarm Records одобряет.

НЛО прилетело и опубликовало эту надпись здесь

trevel 5 мая 2011 в 20:43

еще куча ссылок по backbone

НЛО прилетело и опубликовало эту надпись здесь

Fdu4 6 мая 2011 в 07:21

Спасибо, за статью.
Сейчас плотно использую backbone для HTML5 приложения на iPad. В моем случае необходимо было сделать свой интерфейс не по гайдлайнам производителей. В целом очень понравилось.
Еще бонус в том, что будучи верстальщиком, мне удобно и понятно работать с этой библиотекой, и не приходится отвлекать программистов. Еще не пробовал Sencha Touch и jQuery Touch — это будут следующие этапы :)

kuzemchik 6 мая 2011 в 12:32

по-моему ужасно не читабельный код…

mrShadow 7 мая 2011 в 12:59

Откуда у модели this.view, а у представления this.model? Не понял, где и как осуществляется связывание модели с представлением. Я надеюсь, существует возможность связать с одной моделью несколько представлений?

VolCh 7 мая 2011 в 13:51

// 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 (вернее уверен в обратном :) )

А судя по «так как эта связь один-вид-одна-модель» возможность связывать есть вплоть до «многие-модели-многие-виды» иначе бы, наверное, и заморачиваться не стоило.

mrShadow 7 мая 2011 в 16:12

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

VolCh 7 мая 2011 в 20:13

Глобальный объект похоже, может практически всё знать о приложении. Но в библиотеках JS не силён, потому только предположение.

VolCh 7 мая 2011 в 14:00

Сейчас все данные находятся в памяти приложения. Давайте сохраним их на сервер:
portal.save();

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

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

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

Спасибо за статью.

azproduction 7 мая 2011 в 18:58

var GamesCollection = Backbone.Collection.extend({
  model : Game,
  url: '/games' // <<<
});

VolCh 7 мая 2011 в 20:11

За намёк спасибо. Хотя пример с portal.save(); до введения в коллекции у вас, потому и спросил. Видимо надо читать доки на предмет является ли коллекция обязательным отношением к модели и как формируется id (тоже прямо не указано).

Kane 8 июн 2011 в 21:42

Скажите пожалуйста где именно происходит связывание вида с моделью. В этом примере мне не понятно что такое this.model.

var GameView = Backbone.View.extend({
    initialize: function (args) {
        _.bindAll(this, 'changeName');
        this.model.bind('change:name', this.changeName);
    }
});

azproduction 30 июн 2011 в 07:32

Контроллер связывается с моделью при инициализации контроллера. В том пред примере на самом деле не показано откуда берется 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);
    }

//...
});

Apx 3 июл 2011 в 19:49

Сам, недавно столкнулся с необходимостью превозмочь Backbone, сразу вспомнил про этот топик и решил от него оттолкнуться, но в результате всё пришлось понимать самому. За день я таки разобрался, что к чему, но на самом деле с контроллером всё в разы проще.
Как по мне то пример с тудушками с backbon'овского туториала не самый удачный, не затронут аспект контроллера, и его возможность работать с routes. Да и как основное приложение контроллер был бы более верным решением, т.к. через него более прозрачно проистекают все маннипуляции с данными и рендером вьюшек.

Apx 3 июл 2011 в 19:52

Да и забыл спросить. Это у меня что то неправильно с руками или это у backbone внутренний механизм такой? я заметил что если у AplicationView не определён элемент el : "какой то контейнер", то у этой вьюхи никогда не происходит вызов render(). Я сколько не дебажил, пока не прописывал в классе вьюхи что то типа el: 'body' в консоли не прописывалось моё сообщение element rendered.