URL parameter mapping on router

Question

Below is my router configuration on my spring mvc.

My question is how do I map parameter with router url, so when someone navigates to the url via pasting or refreshing, it will render the exact page.

Example url: http://localhost:8080/techtalks/#/viewMore/12345

publicRouter.js

define(['jquery', 'underscore', 'backbone',
    'views/publicModule/viewMoreView',
], function($, _, Backbone,
    ViewMoreView
) {

    var AppRouter = Backbone.Router.extend({
        routes: {
            // Define some URL routes
            'viewMore': 'viewMoreView',
            // Default
            '*actions': 'defaultAction'
        }
    });
    var initialize = function() {
        var app_router = new AppRouter;
        app_router.on('route:viewMoreView', function() {
            // Call render on the module we loaded in via the dependency array
            ViewMoreView.render();
        });
        Backbone.history.start();
    };
    return {
        initialize: initialize
    };
});

Backbone view

define(['jquery', 'underscore', 'backbone', 
    'text!../../../viewMore.html'
], function($, _, Backbone, adminHomeTemplate) {
    var ViewMoreView = Backbone.View.extend({
        publicArticleTbl: null,
        el: $("#publicPanel"),
        render: function() {
            var data = {};
            publicArticleTbl = null;
            // template
            var compiledTemplateAdminHome = _.template(
                adminHomeTemplate, data);
            // append the item to the view's target
            this.$el.html(compiledTemplateAdminHome);
        },
        // Event Handlers
        events: {

        },
    });
    return new ViewMoreView;
});

Answer 1

Use the callback directly, there's no need to use router events.

Also, catch the id param from the url.

var AppRouter = Backbone.Router.extend({
    routes : {
        // the order the routes are defined is important, any route defined 
        // later takes precedence on previous routes.

        // Default
        '*actions' : 'defaultAction'
        // Define some URL routes
        'viewMore/:id':'viewMoreView',
    },

    viewMoreView: function(id){
        var view = new ViewMoreView({
            el: $("#publicPanel"),
            id: id
        });
        view.render();
    }
});
var initialize = function() {
    var app_router = new AppRouter();
    Backbone.history.start();
};

Then the view:

var ViewMoreView = Backbone.View.extend({
    // compile the template once
    template: _.template(adminHomeTemplate),

    initialize: function(options) {
        // make a copy of the options
        this.options = _.extend({ 
            /* default options goes here if any */
        }, options);

        console.log("id:", this.options.id);
    },
    render: function() {
        var data = {};

        // use the compiled template function here
        this.$el.html(this.template(data));
        return this;
    },
});

Backbone works with standard links, no need to have fancy things to call a route.

'<a href="#/viewMore/' + item['id'] + '" >Read more</a>'

When making a module, generally, you return the constructor instead of an instance. This helps when reusing the same view type. Return an instance when the module is a global service.