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
});
すでに多くのイベントがあるため、実際のコードははるかに大きくなります。そのような構造を最適化する方法はありますか? そして多分他のアドバイスはありますか?