1

Backbone.js で、多数の内部ページを含む 1 ページのアプリケーションを作成する必要があります。

すべてのページは、Router オブジェクトの適切な関数と一致し、ページの特別な要素を表すいくつかのビューで構成されます。

今のところ、私は 2 つのページしか作成していませんが、すでにコードが完全に混乱しています。このページと、ほぼ完全に異なる内部ビューでさえ、イベント ハンドラーや別の内部関数などの多くの共通要素を含んでいます。

それで、それは今どのように見えるか(簡単に):

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