layout - Show Backbone Collection element in a Marionette region -

I have a backbone application running and working properly with requirejs Now, I want to better codify I am trying to migrate the marrient.

I want to show a model from a collection in an area, two buttons in the second area. I want to go from that collection to the next or previous model. And change your mind on the model area.

But I do not know how to iterate the collection and send it to see your model.

With this situation some simple code.

html:

  & lt; Div class = "player" & gt; & Lt; / Div & gt; & Lt; Script id = "layout-template" type = "text / template" & gt; & Lt; Div class = "modelView" & gt; & Lt; / Div & gt; & Lt; Div class = "control" & gt; & Lt; / Div & gt; & Lt; / Script & gt; & Lt; Script id = "model-area" type = "text / template" & gt; & Lt;% = name% & gt; & Lt; / Script & gt; & Lt; Script id = "control-area" type = "text / template" & gt; & Lt; Button ID = "Back" & gt; Previous & lt; / Button & gt; & Lt; Button ID = "Next" & gt; Next & lt; / Button & gt; & Lt; / Script & gt;  
 
 If I understand your question, then you can sync events between two views Trying the same layout in this case I would recommend setting up one. 
 
 Then you can register the scene for your control view: 
 
  ControlsView = Backbone.Marionette.ItemView.extend ({// ... triggers: {" Click # previous ":" control: back "," # click ":" control: next "}});  
 
 Then you will instantiate your thoughts in your controller and setup a handler for the controller to trigger the Model View. 
 
  var router = merianet Apprauter Extension ({appRoutes: {"/": "Start", "/: Index": "Showdold"}}} Var Controller = Marriage.Controlor.andand ({Initialize: Function () {var self = this; ControlsView = new controller view (); this.modelView = new main view (); this.myCollection = new MyCollection (); this MyIndex = 0; this.myCollection.fetch (). Then (function () {self.myIndex = 0 ;}); This._registerTriggers ();}, start: work () {this.controlLayout.show (this.controlView); this.showModel ();}, showModel: function (index) {index = index || this .index; this.modelView.model = myCollection.at (this.index); this.modelLayout.show (this.modelView);}, ShowNext: function () {var max = this.myCollection.models .length; this.index = max? 1: this.index + 1; this.showModel ();}, show: function () {var max = this.myCollection.models.length; this.index = 0? Max: This.index - 1; this.showModel ();}, _registerTriggers: function () {this.controlsView.on ("Control: Next", this.showNext ()); This.controlsView.on ("Control: last" , This.show pre ()); }} Var Controller = New Controller (); Var router = new router ({controller: mode controller}); Controller.start ();  
 
 Using this approach can reduce your thoughts and collections. This will make your code reusable (using the control view in a different context as an example)