Backbone.js: Структурирование приложения для фиксированных боковых панелей

Question

У меня есть приложение, которое имеет среднюю панель, которая всегда изменяется в зависимости от того, на какую часть приложения смотрит пользователь. Это могут быть сообщения, транзакции и т. Д.

Затем в 4 углах приложения вокруг средней панели есть 4 'фиксированные' панели, которые в основном фиксируются на время жизни приложения, но содержат динамически обновляемые данные и, следовательно, нуждаются в для реализации с использованием backbone.js

Как структурировать такое приложение в backbone.js. Кажется, что побеждает правило «Не повторять», чтобы реализовать внутреннюю визуализацию для всех боковых панелей в каждом маршруте в маршрутизаторе, так как я бы в конечном итоге повторил один и тот же код рендеринга в каждом маршруте.

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

Answer 1

JavaScript, как и любой другой код: если вы обнаружите, что пишете одни и те же строки кода, извлеките их в функцию. Если вам нужно использовать одну и ту же функцию, извлеките ее (и связанные функции и данные) в свой собственный объект.

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

Кроме того, поскольку вы собираетесь настраивать один и тот же основной макет страницы при каждом запуске приложения, вам может не понадобиться этот код в маршрутизаторе. Макет происходит независимо от того, стреляет ли маршрутизатор, и независимо от того, какой маршрут запущен. Иногда проще разместить код макета и в другом объекте, а также создать макет перед запуском маршрутизатора.

MyApplication = { 
    layout: function(){ 
    var v1 = new View1(); 
    v1.render(); 
    $("something").html(v1.el); 

    var v2 = new View2(); 
    v2.render(); 
    $("#another").html(v2.el); 
    }, 

    doSomething: function(value){ 
    // do someething with the value 
    // render another view, here 
    var v3 = new View3(); 
    v3.render(); 
    $("#whatever").html(v3.el); 
    } 
} 

MyRouter = Backbone.Router.extend({ 
    routes: { 
    "some/route/:value": "someRoute" 
    }, 

    someRoute: function(value){ 
    MyApplication.doSomething(value); 
    } 
}); 

// start it up 
MyApplication.layout(); 

new MyRouter(); 

Backbone.history.start(); 

Я написал несколько статей, касающихся этих вещей, которые вы могли бы оказаться полезными:

http://lostechies.com/derickbailey/2012/02/06/3-stages-of-a-backbone-applications-startup/

http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/

http://lostechies.com/derickbailey/2011/12/27/the-responsibilities-of-the-various-pieces-of-backbone-js/

http://lostechies.com/derickbailey/2012/03/22/managing-layouts-and-nested-views-with-backbone-marionette/