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

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

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

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

Событие 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 мероприятия.Когда вы указать строку для обратных вызовов, вы можете иметь столько имена функций обратного вызова, как вы хотите, разделенных пробелами.Все эти функции будут вызываться, когда события.Любое имя функции, что вы укажете в строке должно быть метод .__ зрения 0 |

Есть альтернативные способы указать 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 конфигурации в Backbone.Вы увидите это понятие конфигурации показать много, особенно в последующих статьях, когда мы попадаем в ItemView, CollectionView 44 ~ и | .

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

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

Как правило, это было бы все, что вам нужно, но принимает его марионеток дальше, добавив 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 56 ~ и | методы просмотра автоматически запустить его без вашего необходимости прислушиваться к событиям.Просто объявить методы и марионеток будет убедиться, что они вызываются.Конечно, другие объекты будут по-прежнему необходимо прислушиваться к событиям на вид .

ДОМ Refresh

Назад, когда мы обсуждали Application, я упомянул Region немного.� …

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

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