Полное введение до Backbone.Marionette (Часть 3)

Чтобы помочь вам раскрывают полный потенциал марионеток, we’ ве подготовлен весь eBook ¹ полный полезных практических примеров, которые также доступна в Smashing Library².- Ред .

В этой серии статей о Backbone.Marionette, мы уже обсуждали Application и Module.На этот раз мы будем принимать глупца в как марионеток помогает сделать вид лучше в Backbone.Марионеток расширяет базу View класс от Backbone, чтобы дать нам больше встроенной функциональности, чтобы устранить большую часть шаблонного кода, и преобразовать все общего кода до конфигурации .

Я настоятельно рекомендую вам вернуться и прочитать статьи о Application ³ и Module ⁴ первых, если вы еще этого не сделали.Некоторые вещи могут быть упомянуты в этой статье, относятся к предыдущим статьям, и это является частью серии статей о марионеток, так что если вы хотите узнать о марионеток, вы должны прочитать целый ряд .

Event Binding

До недавнего времени, просмотров Магистральные часто неправильно, вызывая ужасные проблемы, известной как проблема была вызвана мнением слушать событий на модели, которая сама по себе является совершенно безвредным »взглядов зомби.”.Проблема была в том, что, когда взгляды не были больше не нужны и были “отброшены”, они никогда не перестали слушать событий на модели, которая означает, что модель все еще была ссылкой на вид, сохраняя его от сборщиком мусора.Это вызвало объем памяти, используемый приложением к постоянно растут, и вид будет по-прежнему реагировать на события от модели, хотя это не было бы оказание ничего, потому что он был удален из DOM .

Много расширений и плагинов Магистральные — в том числе марионеток — исправить это на ранней стадии.Я не буду вдаваться в подробности о том, что, хотя, потому что разработчики позвоночника в устранена эту проблему самостоятельно в недавно опубликованном Backbone 1,0 путем добавления listenTo И stopListening методы в Events, которые Магистральная в View “class” наследует от.Разработчики марионетка в с тех пор удалены собственную реализацию этой функции, но это не значит, марионеток не поможет нам с какой-то другойвещи, связанные с событием обязательного .

Чтобы сделать привязку к событиям на моделях Посмотреть профиль и коллекций простых, марионеток дает нам несколько свойств для использования при расширении Просмотры марионетка в: modelEvents и collectionEvents.Просто передайте объект, где ключи название мероприятия Мы слушаем от модели или коллекции, и свойство имя (имена) функции для вызова при запуске этого события.Посмотрите на этом простом примере:

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
    modelEvents: {
        'change:attribute': 'attributeChanged render',
        'destroy': 'modelDestroyed'
    },

    render: function(){ … },
    attributeChanged: function(){ … },
    modelDestroyed: function(){ … }
});

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

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
    initialize: function() {
        this.listenTo(this.model, 'change:attribute', this.attributeChanged); 
        this.listenTo(this.model, 'change:attribute', this.render); 
        this.listenTo(this.model, 'destroy', this.modelDestroyed);
    },

    render: function(){ … },
    attributeChanged: function(){ … },
    modelDestroyed: function(){ … }
});

Есть несколько ключевых вещей, чтобы отметить.Во-первых, modelEvents используется для прослушивания модели отображения вида и collectionEvents используется для прослушивания в подборку отображения вида (this.model и this.collection, соответственно).Во-вторых, вы, возможно, заметили, что существует два обратных вызовов для change:attribute события.Когда вы задаете строку для обратных вызовов, вы можете иметь столько имен функций обратного вызова, как вы хотите, разделенных пробелами.Все эти функции будут вызываться при наступлении события.Любое имя функции, что вы укажете в строке должно быть метод представления .

Есть альтернативные способы задания modelEvents и collectionEvents, тоже.Во-первых, вместо того, чтобы, используя строку для указания имен методов на взгляд, можно назначить анонимные функции:

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
    modelEvents: {
        'change': function() {
            …
        }
    }
});

Это, вероятно, не лучшая практика, но есть вариант, если вам это нужно.Кроме того, вместо того, чтобы просто присвоения литерала объекта до modelEvents или collectionEvents, можно назначить функцию.Функция нужно будет возвращать объект, который имеет события и обратные вызовы.Это позволяет создать список событий и обратные вызовы динамично.Я не был в состоянии думать о всех ситуациях, в которых вам нужно будет определить привязки событий динамически, но если вам это нужно, это может быть очень удобно .

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
    modelEvents: function() {
        return {'destroy': 'modelDestroyed'};
    },

    modelDestroyed: function(){ … }
});

The modelEvents и collectionEvents особенность следует образцу, что, позвоночник и марионеток использовать как можно чаще: отодвинуть код для простой конфигурации.Магистральная сам сделал это с events хэша, который позволяет легко настроить слушателей событий DOM.Марионетка в modelEvents и collectionEvents непосредственно вдохновлен оригинальным events конфигурации в позвоночнике.Вы увидите, что это понятие конфигурации показать много, особенно в последующих статьях, когда мы попадаем в ItemView, CollectionView и CompositeView .

Уничтожение View

Как я уже упоминал в начале предыдущего раздела, иногда требуется вид на отвергаются или удаляются, потому что модель была destroyed ⁵ или потому, что мы должны показать иную точку зрения на его месте,С stopListening, у нас есть силы, чтобы очистить все из этих привязок событий.Но то, что об уничтожении остальной зрения?Магистральная имеет remove функция, которая вызывает stopListening для нас и также удаляет вид из DOM .

Как правило, это будет всевам нужно, но марионеток берет его дальше, добавив close функцию.При использовании Просмотры марионетка, вы хотите, чтобы позвонить close вместо remove, потому что это будет убирать все вещи, что взгляды марионетка настроено в фоновом режиме .

Еще одно преимущество предлагаемых марионеток в close метод является то, что он выстреливает некоторые события.В начале закрытия мнение, это будет выстрелить в before:close событие, а затем close событие, когда он закончил.В дополнение к событиям, вы можете указать методы на том, что будет работать только до этих событий уволили .

Backbone.Marionette.View.extend({ // We don't normally directly extend this view
    onBeforeClose: function() {
        // This will run just before the before:close event is fired
    },

    onClose: function(){
        // This will run just before the close event is fired
    }
});

Если вы хотите запустить код, прежде чем вид исчезает полностью, вы можете использовать onBeforeClose и onClose методы просмотра автоматически запустить его без вашего необходимости прислушиваться к событиям.Просто объявить методы, и марионеток будет убедиться, что они вызываются.Конечно, другие объекты будут по-прежнему необходимо прислушиваться к событиям на взгляд .

DOM Refresh

Еще когда мы обсуждали Application, я упомянул Region немного.Я не буду вдаваться в это зде� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 05.06.2014 by coding.smashingmagazine.com