路由器上的 URL 参数映射

Question

下面是我在 spring mvc 上的路由器配置。

我的问题是如何将参数映射到路由器 url，所以当有人通过粘贴或刷新导航到该 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
    };
});

主干视图

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

直接使用回调，不需要使用路由事件。

另外，从 url 中捕获 id 参数。

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();
};

然后是视图：

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 使用标准链接，无需花哨的东西来调用路由。

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

在制作模块时，通常会返回构造函数而不是实例。这有助于重用相同的视图类型。当模块是全局服务时返回一个实例。