2016-04-19 3 views
1

У меня есть две коллекции: «коллекция» и «collection2». Я не могу понять, как отображать обе эти коллекции в таблицу, но держать их в отдельных представлениях. Пример:Вложенные представления в marionette.js при создании таблицы

row1: Группа 1,

row2: первый объект коллекции

row3 .. второй объект коллекции ....

строка 4 Группы 2,

строка 5 первых в японских интернет магазинах. Доставка морем, EMS и авиа2 объект

ряд 6 секунд комплект2 объект ....

Пожалуйста, помогите

JS

(function() { 

      // Here's the list of objects that we will be displaying 
      var a = JSON.parse('{"type":"report","limit":20,"offset":0,"data":[{"group":"platform","detail":[{"reason":"Invalid Issuer","errorcode":"123456","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"},{"reason":"Declined","errorcode":"111111","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"},{"reason":"Insufficient funds","errorcode":"52252","total":"1","realtotal":"1","nonrecurring":"1","recurring":"0"}]},{"group":"gateway","detail":[{"reason":"Transaction timed out","errorcode":"52525","total":"7","realtotal":"3","nonrecurring":"7","recurring":"0"},{"reason":"Error","errorcode":"623","total":"7","realtotal":"3","nonrecurring":"7","recurring":"0"}]}],"page":"1"}'); 

      var model = new Backbone.Model(a); 

      var collection = model; 

      var data = collection.get('data'); 

      var collection = new Backbone.Collection(data[0].detail); 
      var collection2 = new Backbone.Collection(data[1].detail); 


      var ItemView = Marionette.ItemView.extend({ 
       className: 'item-view', 
       tagName: 'tr', 
       template: '#template-color-item', 
      }); 

      var TableView = Marionette.CompositeView.extend({ 
       template: '#template-table', 
       className: 'table-view', 
       tagName: 'table', 

       itemViewContainer: 'tbody', 
       itemView: ItemView 
      }); 


      var table = new TableView({ 
       el: '.list', 
       collection: collection 
      }); 

      table.render(); 

      })(); 

HTML

  <!DOCTYPE html> 
      <html> 

       <head> 
       <title>Superheroes and villains</title> 

       <script src="./assets/javascripts/vendor/jquery.js"></script> 
       <script src="./assets/javascripts/vendor/json2.js"></script> 
       <script src="./assets/javascripts/vendor/underscore.js"></script> 
       <script src="./assets/javascripts/vendor/backbone.js"></script> 
       <script src="./assets/javascripts/vendor/backbone.marionette.js"></script> 
       <script src="./assets/javascripts/vendor/bootstrap.js"></script> 

       <link href="./assets/css/style.css" rel="stylesheet"> 


       </head> 
       <body> 
       <main> 

        <h1>Table</h1> 
        <p> 
        Simple Table rendered with a composite view. 
        </p> 

        <h1>Example</h1> 

        <div class="list"></div> 
       </main> 


       <script type='text/template' id='template-table'> 
        <table class="table table-hover table-striped table-bordered"> 
         <thead> 
          <td>header 1</td> 
          <td>header 2</td> 
          <td>header 3</td> 
          <td>header 4</td> 
          <td>header 5</td> 
         </thead> 
         <tbody> 

         </tbody> 
        </table> 
       </script> 
       <script type='text/template' id='template-color-item'> 
        <td><%= reason %></td> 
        <td><%= errorcode %> </td> 
        <td><%= nonrecurring %></td> 
        <td><%= realtotal %></td> 
        <td><%= recurring %></td> 
       </script> 

       <script src="./assets/javascripts/application.js"></script> 
       <div class="table"></div> 
       </body> 
      </html> 
+0

Быстрый просмотр: https://jsfiddle.net/gxk2n3wd/1 / – Yuri

ответ

0

Любая конкретная причина, эти коллекции должны быть помещены в той же таблице, но содержатся в отдельных видах?

Если нет, то это было бы просто, чтобы сделать все модели детали путем конкатенации ваши детали массивов:

var detailsArrays = a.data.map(function(d) { return d.detail }); 
var details = _.flatten(detailsArrays); // put all details objects into one array 
var collection = new Backbone.Collection(details); 

Fiddle: https://jsfiddle.net/dkrg80yd/

Смежные вопросы