Backbone Marionette：從CollectionView獲取嵌套/交換視圖

Question

所以我一直在玩Backbone Marionette，並且能夠從json數據創建collectionview。

這裏是我有什麼

圖片，

林試圖讓每個ItemView控件有一個onclick事件，將打開通過下劃線模板傳遞從ItemView控件的數據嵌套的視圖。 這裏是一個swapview的例子（不是我的btw）：http // jsfiddle.net/VLY4t/14/

這是我的代碼看起來像（第二個圖片）（注意我有一個骨幹路由器的網址哈希但我無法呈現下劃線模板）。任何幫助是極大的讚賞： 工作的例子是：狗的品種是<％=名稱％>

客戶端模板和UI是這樣的：

<script type="text/template", id="dogs-template"> 
<ul><ul> 
</script> 

<script type="text/template", id="dog-template"> 
<a href="dogs/<%= name %>"> <%= name %> 
</script> 

<script type="text/template", id="play-template"> 
p This dog's breed is <%= name %> 
</script> 

而JavaScript是：

//Im serving data via RESTful JSON, but the data looks like this 
var dogs = [{name: 'yorkie'}, {name: 'pitbull'}, {name: 'dobberman'}, etc] 

App = new Backbone.Marionette.Application(); 

App.addRegions({ 
mainRegion: "#content", 
playRegion: "#play" 
}); 

//Call the backbone history here 

App.on("initialize:after", function(options){ 
    if (Backbone.history){ 
    Backbone.history.start({pushState: true}); 
    } 
}); 


//Call the Controller 


Controller = { 


}; 

// Start the models n collections 

Dog = Backbone.Model.extend({ 

}); 

Dogs = Backbone.Collection.extend({ 
model: Dog, 
url: '/jonas', 

}); 

DogView = Backbone.Marionette.ItemView.extend({ 
template: "#dog-template", 
tagName: 'li', 
initialize: function(){ 
     //var moot = _.bindAll(this.model); 

    }, 



events: { 
"click" : function() { 
     //show new region here 

     App.playRegion.show(theplayview); 

    } 
    } 

}); 

PlayView = Backbone.Marionette.ItemView.extend({ 
template: '#play-template' 

}); 

DogsView = Backbone.Marionette.CollectionView.extend({ 
template: "#dogs-template", 
itemView: DogView 
}) 

var doggies = new Dogs(); 
var bob = doggies.fetch({async: false}); 

var doggyview = new DogsView({collection: doggies}); 

App.mainRegion.show(doggyview); 

var theplayview = new PlayView(this.model); 


MyRouter = Backbone.Marionette.AppRouter.extend({ 
controller: Controller, 


    appRoutes: { 
     "": "route1", 

     "testrouter": "route2", 

     "testrouter#dogs": "route3", 

     "testrouter#dogs/:id": "route4", 


    }, 


}); 

App.addInitializer(function(){ 
console.log("Router is on") 
new MyRouter(); 
}); 


App.on("initialize:after", function(){ 


}); 

App.start(); 

Answer 1

嘗試連線了自己的點擊處理程序，像這樣

events: { 
"click" : "showView" 
}, 
showView: function() { 
    var theplayview = new PlayView(this.model); 
    App.playRegion.show(theplayview); 
}