私は2つのコレクションを持っています： "コレクション"と "コレクション2"。これらのコレクションの両方をテーブルにレンダリングする方法を理解することはできませんが、別々のビューにそれらを保持しています。例：テーブルの作成時にmarionette.jsのネストされたビュー

ROW1：グループ1、

ROW2：最初のコレクションオブジェクト

ROW3 ..第2の収集物....

行4グループ2、

行5第一コレクション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>

出典

2016-04-19 Yuri

クイックビュー：https://jsfiddle.net/gxk2n3wd/1

ない場合、あなたの詳細アレイを連結することにより、すべての詳細モデルをレンダリングするためには簡単だろう/ – Yuri

これらのコレクションは、同じテーブルに置くが、別のビューに保管する必要が任意の特定の理由は？

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

フィドル：https://jsfiddle.net/dkrg80yd/

出典

2016-05-18 17:06:18 lucasjackson

テーブルの作成時にmarionette.jsのネストされたビュー

JS

HTML

答えて

関連する問題