Backbone Marionette：从 CollectionView 获取嵌套/交换视图答案

【问题标题】：Backbone Marionette: Get Nested/Swap Views from a CollectionViewBackbone Marionette：从 CollectionView 获取嵌套/交换视图
【发布时间】：2013-03-31 09:29:41
【问题描述】：

所以我一直在玩 Backbone Marionette，并且能够从 json 数据创建一个集合视图。

这是我所拥有的图片

我试图让每个 itemview 都有一个 onclick 事件，该事件将打开一个嵌套视图，该视图通过下划线模板从 itemview 传递数据。这是一个 swapview 示例（不是我的顺便说一句）：http//jsfiddle.net/VLY4t/14/

这是我的代码的样子（第二张图片）（请注意，我通过 url 哈希有一个骨干路由器，但无法呈现下划线模板）。任何帮助是极大的赞赏。：工作示例是：狗的品种是

客户端模板和用户界面是这样的：

<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();

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

尝试像这样连接您的点击处理程序

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

【讨论】：