1

我必须在 Backbone.js 中制作带有十几个内部页面的单页应用程序。

我决定这样做：每个页面都与Router对象中的适当功能相匹配，并由几个视图组成，它们代表页面的特殊元素。

就目前而言，我只制作了两个页面，但代码中已经一团糟——这些页面甚至内部视图几乎完全不同，有许多共同的元素，例如事件处理程序和另一个内部函数。

所以，它现在的样子（简要地）：

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'main',
        'user/:username': 'account'
    },

    main: function() {
        new MainView();
    },

    account: function(username) {
        new AccountTopView();
        new AccountMiddleView();
    }
});

var LinkEvents = {
    'click a': 'navigate'
};

var navigate = function(event) {
    event.preventDefault();
    var link = event.currentTarget;
    var url = link.href;
    url = RemoveBaseUrl(url);
    app.navigate(url, {trigger: true});
}


var AccountMiddleView = ModalView.extend({
    template: _.template($('#tpl-account-middle').html()),

    events: _.extend(
        {},
        LinkEvents
    ),

    render: function() {
        this.$el.html(
            this.template(

            )
        );
        return this;
    },

    navigate: navigate
});


var AccountTopView = ModalHatView.extend({
    template: _.template($('#tpl-account-top').html()),

    events: _.extend(
        {},
        LinkEvents
    ),

    render: function() {
        this.$el.html(
            this.template(

            )
        );
        return this;
    },

    navigate: navigate
});

真正的代码要大得多，因为已经有很多事件了。有没有办法优化这种结构？也许还有其他建议？

4

0 回答 0