路由器上的URL参数映射

时间:2016-11-11 16:34:01

标签: javascript spring backbone.js backbone-routing

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

我的问题是我如何使用路由器网址映射参数,因此当有人通过粘贴或刷新导航到网址时,它将呈现确切的网页。

示例网址: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;
});

1 个答案:

答案 0 :(得分:1)

直接使用回调,无需使用路由器事件。

另外,从网址中抓取declare -A param。

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

Backbone可与标准链接配合使用,无需使用花哨的东西来调用路径。

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

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