Browserify + Backbone.js Общий раздел «ApplicationState»

Question

Я не понимаю, как поделиться какой-то «одиночной» моделью объектов приложения, состоящей из одного взгляда, с помощью браузера. Книги и учебники часто используют глобальное пространство имен, таких как:

var app = app || {}; 

У меня есть простой пример приложения, которое состоит из:

app.js

var $ = require('jquery'); 
var Backbone = require('backbone'); 
Backbone.$ = $; 

var MenuView = require('./views/MenuView'); 
var ContainerView = require('./views/ContainerView'); 

new MenuView(); 
new ContainerView(); 

MenuView.js

var Backbone = require('backbone'); 
var ApplicationState = require('../models/ApplicationState'); 

module.exports = Backbone.View.extend({ 
    el: '#menuView', 
    events: { 
     'click .menuLink': 'changePage' 
    }, 
    changePage: function(event) { 
     event.preventDefault(); 
     var viewName = $(event.target).attr('data-view'); 
     ApplicationState.set('currentView',viewName); 
    } 
}); 

ContainerView.js

var Backbone = require('backbone'); 
var ApplicationState = require('../models/ApplicationState'); 

module.exports = Backbone.View.extend({ 
    el: '#containerView', 
    initialize: function() { 
     this.listenTo(ApplicationState, 'change', this.render); 
     this.render(); 
    }, 
    render: function() { 
     this.$el.html(ApplicationState.get('currentView')); 
    }, 
    close: function() { 
     this.stopListening(); 
    } 
}); 

Это кажется работает, используя этот подход:

ApplicationState.js вар Backbone = требуется ('позвоночник');

var ApplicationState = Backbone.Model.extend({ 
    defaults: { 
     currentView: 'TransactionListView' 
    } 
}); 

module.exports = new ApplicationState(); 

Действительно ли модуль ApplicationState создан только один раз (кеширование)? Или существует риск воссоздания/сброса модуля?

Какова наилучшая практика для моего варианта использования? Большое спасибо.

Answer 1

Да, в примере, который вы дали, будет только одно ApplicationState. Browserify выполняет все, что следует за module.exports =, как только запускается js-файл, а затем все, что требует от этого файла, передают ссылку на результат.

Однако, как правило, лучше избегать совместного использования этого способа между представлениями и вместо этого использовать родительское представление, которое делегирует в subviews. Существует несколько способов установить это. Для ознакомления с рекомендациями по организации базового приложения ознакомьтесь с этим разговором: https://www.youtube.com/watch?v=Lm05e5sJaE8

Для примера, который вы указали, я бы очень хотел использовать Backbone's Router. В вашем примере у вас есть навигатор, который меняет «основной» вид. Backbone.Router перехватывает навигацию и проверяет ее против ваших указанных маршрутов, вызывая ваш метод просмотра. Например:

router.js

module.exports = Backbone.Router.extend({ 
    initialize: function(options){ 
     this.ContainerView = new ContainerView(); 
    }, 
    routes: { 
     'transactions': 'showTransactionListView', 
     'transaction/:id': 'showTransactionDetailView' 
    }, 
    showTransactionListView: function() { 
     this.ContainerView.render('TransactionListView'); 
    }, 
    showTransactionDetailView: function(id) { 
     this.ContainerView.render('TransactionDetailView', id); 
    } 
}); 

Тогда любая ссылка на #transations (или просто transactions, если вы используете Backbone History) будет вызывать ContainerView.render('TransactionListView'). И, в качестве бонуса, если вы перезагрузите страницу, вы все равно будете смотреть на TransactionListView.

Другие ноты:

• Вы хотите, чтобы убедиться, что вы сбрасываете старые взгляды, когда вы замените их (по телефону .remove() на них), чтобы избежать утечек памяти.Further Reading
• Вы можете добавить некоторую гибкость к маршрутизатору и использовать шаблон контроллера для визуализации подвидов с this nifty plugin