JS

Question

我有两个集合：“collection”和“collection2”。我无法弄清楚如何将这两个集合呈现到表中，但将它们保存在单独的视图中。例如：

第1行：第1组，

row2：第一个集合对象

row3 ..第二个集合对象....

第4行第2组，

第5行第一个collection2对象

第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>

Answer 1

这些集合需要放在同一个表中但保存在不同的视图中的任何特殊原因吗？

如果没有，通过连接您的详细信息数组来呈现所有细节模型将是直截了当的：

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/

创建表时在marionette.js中的嵌套视图

JS

HTML

1 个答案: