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>

Quelle

2016-04-19 Yuri

Schnellansicht: https://jsfiddle.net/gxk2n3wd/1 / – Yuri

einen besonderen Grund diese Sammlungen brauchen setzen in der gleichen Tabelle werden aber immer in getrennten Ansichten?

Wenn nicht, würde es einfach sein, alle Modelle, um die Detail zu machen, indem Sie Ihre Details Arrays verketten:

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/

Quelle

2016-05-18 17:06:18 lucasjackson

Verschachtelte Ansichten in marionette.js beim Erstellen einer Tabelle

JS

HTML

Antwort

Verwandte Themen