Backbone アプリの最初の状態は、サーバーからレンダリングされます。モデルをブートストラップしているので、ページの読み込み時にルーターをトリガーする必要はありません。
アプリを初期化します。
window.App = {
init:function(root){
this.root = root;
this.router = new AppRouter();
Backbone.history.start({pushState:true, silent:true});
}
}
ルート:
var AppRouter = Backbone.Router.extend({
routes : {
"" : "index",
"profile/:id" : "profile",
},
profile: function(id){
var user = new App.Models.User({id: id});
var view = (new App.Views.Profile({model:user})).render().el
App.root.empty().append(view)
}
意見:
App.Views.Profile = Backbone.View.extend({
events:{
"click #toggle" : "toggleTab"
},
initialize:function(opts){
this.model.on('sync', this.render, this);
this.model.fetch();
},
template: Handlebars.templates['profile.hbs'],
render: function(){
this.$el.html(this.template());
return this;
},
toggleTab:function(){...}
Backbone.historyに渡しsilent: true
ているので、最初のルートがトリガーされないため、click
イベントがバインドされません。これは、ルーターをトリガーしないイベントで発生します。ページの読み込みと再レンダリング/フェッチでルーターをトリガーしたくありません。navigate
この場合、ing はオプションではありません。
このシナリオでこのようなイベントをバインドするにはどうすればよいですか?
更新/明確化
SEO の理由から、サーバーは html をレンダリングします。これは、既に html とデータがそこにあることを意味します (実際にはempty()
、再レンダリング、トリガー、またはフェッチする必要はありません。サーバーとクライアントの両方でハンドルバーを使用しています。ここでの問題は、「初期ページ」が「Backbone.View」ではないため、イベント バインディングが取得されないことだと理解しています。ルーターをトリガーしたり、ビューを生成してコンテンツを置き換えたりすることは簡単にできますが、モデルだけをブートストラップして、html を再レンダリングする必要がありますか?これにはベスト プラクティスはありますか?