Укажите, пожалуйста, на изъяны в коде на Backbone.js?

Question

[elailasou]

Изучаю Backbone.js, идет со скрипом. Подскажите, что в этом простом примере можно улучшить?
jsFiddle

Answer 1

[Максим Антонихин]

По сути пример нормальный. Бекбон на то и создан, что бы вы делали все сами и как хотите.
Разве что посоветую марионетку, она облегчит ваши страдания от бекбона.

Comments

[Александр Прозоров]

А я бы пошёл дальше и настоятельно порекомендовал бы марионетку (Marionette.js) чтобы не множить страдания от чистого Backbone.

[Максим Антонихин]

Александр Прозоров: тогда уже вообще отказаться от библиотеки бекбона со всеми его вытекающими. Сам перешел на ангуляр с бекбона + марионет и доволен как слон.

[Александр Прозоров]

Максим Антонихин: Зависит от задач, которые перед вами стоят. Вопрос был про Backbone, а не какой фреймворк выбрать. Просто чистый Backbone он как раз для тех кто знает почему он выбрал именно чистый BB. А для новичков я сразу советую разбираться с Марионеткой, по части архитектуры приложения и работы с представлениями она как раз закрывает многие непонятные моменты.

Answer 2

[Константин Китманов]

render: function(person) {
        var that = this;
        this.$el.empty();
        this.collection.each(function(person) {
            var personView = new PersonView({model: person});
            that.$el.append(personView.render().el);
        });
        return this;
    }

Collection#each это всего лишь закаррированный _.each, который третьим аргументом принимает контекст для итератора. То есть можно переписать так:

render: function(person) {
        this.$el.empty();
        this.collection.each(function(person) {
            var personView = new PersonView({model: person});
            this.$el.append(personView.render().el);
        }, this);
        return this;
    }

А еще этот кусок будет тормозить тем сильнее, чем больше элементов будет в списке.
Я обычно не делаю по вьюхе на каждый элемент, хватает одной вьюхи на весь список.

Ну по мелочи — отступы, всегда использовать {}, определиться, двойные или одинарные кавычки, не использовать однобуквенные переменные и параметры функций (что это за e — error, exception, event?).
В остальном криминала нет:)

Comments

[elailasou]

Спасибо. А обработчик нажатия Enter вы бы так реализовали? Есть что-то красивее, чем e.handleObj.selector?

[Константин Китманов]

junk1114: вот это странное место, кстати. Вы же вешаете обработчик именно на input#name, зачем еще одна проверка?

[elailasou]

Ну мне нужно при клике на кнопке и при нажатии Enter произвести одно и то же действие

[Константин Китманов]

junk1114: а, понял.
Лучше вот как сделать:
* вынести непосредственно действие, бизнес-логику, в отдельный метод
* сделать два отдельных обработчика событий
* вызывать бизнес-метод из обработчиков

Всегда лучше разносить обработку событий от DOM-дерева и бизнес-логику. Так проще покрывать тестами, рефакторить и вообще уменьшается связанность.

Answer 3

[Илья Абламонов]

PersonView.prototype.render вызывается 2 раза: 1 раз в конструкторе (не стоит так делать) и один раз в цикле рендера коллекции.