Question

App.Routers.Applications = Backbone.Router.extend({

    initialize: function () {
        this.view = Object.create(App.Views.Applications);
        this.view.init();
    },

    routes: {
        'search/:query/status/:status/page(/:page)': 'search_status_page',

        'search/:query/status(/:status)': 'search_status',
        'search/:query/page(/:page)': 'search_page',
        'status/:query/page(/:page)': 'status_page',

        'search(/:query)': 'search',
        'status(/:status)': 'status',
        'page(/:page)': 'page',

        '': 'index',
    },

    index: function () {
        this.view.renderPage();
    },

    search: function (query) {
        this.view.renderPage({search:query});
    },

    status: function (status) {
        this.view.renderPage({status:status});
    },

    page: function (page) {
        this.view.renderPage({page:this.toNumber(page)});
    },

    search_status: function (query, status) {
        this.view.renderPage({search:query, status:status});
    },

    search_page: function (query, page) {
        this.view.renderPage({search:query, page:this.toNumber(page)});
    },

    status_page: function (status, page) {
        this.view.renderPage({status:status, page:this.toNumber(page)});
    },

    search_status_page: function (query, status, page) {
        this.view.renderPage({search:query, status:status, page:this.toNumber(page)});
    },

    toNumber: function (page) {
        return parseInt(page, 10) || 1;
    }
});

有没有办法简化这个路由器？它将收到不同的参数，搜索，状态和页面，所有这些都是可选的。

首先，我要考虑将所有路线合并为一条的可能性。通过深入了解Backbone路由器的工作原理，可以实现这一点。

其次可以将所有方法（减去toNumber）合并为一个。使用?search=aaaa&status=bbbbb类型的路线可以更容易。

- 顺便说一句，如果你想知道初始化方法，我不会使用Backbone View。

Answer 1

所以这是我能想到的最好的解决方案，可以灵活地接受许多参数。但是url hash的格式必须与#search=aaa&status=bbb&page=2类似，而不是更好的默认格式#search/aaa/status/bbb/page/2。但我相信这种权衡是值得的。

App.Routers.Applications = Backbone.Router.extend({

    initialize: function () {
        this.view = Object.create(App.Views.Applications);
        this.view.init();
    },

    routes: {
        '(:param)': 'render'
    },

    render: function (param) {
        var options = this.getOptionsFromHash(param);
        this.view.renderPage(options);
    },

    getOptionsFromHash: function (hash) {
        if (!hash) return {};

        var options = {}, values;

        hash.split('&').forEach(function (pair) {
            values = pair.split('=');
            options[values[0]] = values[1];
        });

        return options;
    }
});

简化Backbone Router以获取多个可选值

1 个答案: