Geek asks and answers

Managing Router Views in Backbone.js

I work in a single page application that has the following layout:

Layout of the app

I use the Backbone.js router to control the elements that are loading onto the screen:

var AppRouter = Backbone.Router.extend({
    routes: {
        ""              : "list",
        "content1"      : "content1",
        "content1/cont3": "cont3"
    },

    list: function() {
        var list = new List().render().$el; //view
        $("#List").html(list);
    },

    content1: function(){
        var cont1 = new Content1().render().$el; //view
        $("#Content1").html(cont1);
    },

    content3: function(){
        var cont3 = new Content3().render().$el; //view
        $("#Cont3").html(cont3);
    }        

});

Each time I click on a list item in #List, # Content1 is generated, and when I do this in blocks on # Content1, # Cont3 appears.

The problem I am facing is that if for some reason I refresh the page, for example, when the address is localhost / content1; elements in #List disappear.

I want the content in #List to always be present at boot, no matter what the URL may be, as well as the content in # Content1. Is there a way to achieve this using trunk routers?

thank

+5
2

1 ↔ 1 .
- :

"list": "displayContent" ,
"list/: c1": "displayContent" ,
"list/: c1/: c3": "displayContent" ,

, , , , .

displayContent: function (c1, c3) {

content1 , , ..

: Backbone.js?

, , Backbone , , , Backbone.

https://github.com/tbranyen/backbone.layoutmanager
https://github.com/derickbailey/backbone.marionette

+4

, :

.....
   list: function() {
        var list = new List().render().$el; //view
        $("#List").html(list);
    },

    content1: function(){
        var cont1 = new Content1().render().$el; //view
        $("#Content1").html(cont1);
        //Pseudo code
        if (listisempty){
           list();//If the list is empty, then the initialization list.
        };
    },

.....
0

More articles:


All Articles