Несколько страниц с Backbone.js

Question

Я использую опорную плиту https://github.com/tbranyen/backbone-boilerplate и не знаю, как лучше всего обрабатывать более одной страницы. Я не могу найти ответ, который помогает мне легко понять. В основном, я думаю об этих вариантах:

1. Должны ли каждая страница отличаться от config.js? Мне нравится config-userpage.js, config-homepage.js ...?
2. Должен ли я иметь разные router.js для другой страницы? Например router-userpage.js или router-homepage.js, ...?
3. Должен ли я просто попробовать другой шаблон, например https://github.com/hbarroso/backbone-boilerplate?

Answer 1

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

Хороший ссылочный пример для базового котла: http://githubviewer.org/. Я выпустил все, что с открытым исходным кодом, и вы можете посмотреть, как основные страницы добавляются там.

Возможно, вы захотите сделать креативную работу и создать модель страницы, которая обрабатывает какую-либо страницу, на которой вы находитесь и внутри каждого маршрута задаете новое название страницы, а какие макеты - .

Очень простой, проверка концепции, реализация внутри app/router.js мощь выглядеть примерно так:

define([ 
    // Application. 
    "app", 

    // Create modules to break out Views used in your pages. An example here 
    // might be auth. 
    "modules/auth" 
], 

function(app, Auth) { 

    // Make something more applicable to your needs. 
    var DefaultPageView = Backbone.View.extend({ 
    template: _.template("No page content") 
    }); 

    // Create a Model to represent and facilitate Page transitions. 
    var Page = Backbone.Model.extend({ 
    defaults: function() { 
     return { 
     // Default title to use. 
     title: "Unset Page", 

     // The default View could be a no content found page or something? 
     view: new DefaultPageView(); 
     }; 
    }, 

    setTitle: function() { 
     document.title = this.escape("title"); 
    }, 

    setView: function() { 
     this.layout.setView(".content", this.get("view")).render(); 
    }, 

    initialize: function() { 
     // Create a layout. For this example there is an element with a 
     // `content` class that all page Views are inserted into. 
     this.layout = app.useLayout("my-layout").render(); 

     // Wait for title and view changes and update automatically. 
     this.on({ 
     "change:title": this.setTitle, 
     "change:view": this.setView 
     }, this); 

     // Set the initial title. 
     this.setTitle(); 

     // Set the initial default View. 
     this.setView(); 
    } 
    }); 

    // Defining the application router, you can attach sub routers here. 
    var Router = Backbone.Router.extend({ 
    routes: { 
     "": "index" 
    }, 

    index: function() { 
     // Set the login page as the default for example... 
     this.page.set({ 
     title: "My Login Screen!", 

     // Put the login page into the layout. 
     view: new Auth.Views.Login() 
     }); 
    }, 

    initialize: function() { 
     // Create a blank new Page. 
     this.page = new Page(); 
    } 
    }); 

    return Router; 

}); 

Как вы можете видеть, это упрямый способ создания «страницы» и я m sure у других есть лучшие реализации. В Matchbox у меня есть очень надежная модель, которая делает панировочные сухари и показывает, какие кнопки навигации на выделяют на основе состояния. Вы также можете создавать маршрутизаторы внутри своих модулей , чтобы инкапсулировать функциональность и выставить модель страницы на объекте приложения так, чтобы , что она доступна в вашем приложении.

Надеюсь, это поможет!