javascript - 创建表时在marionette.js中嵌套 View

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

第1行：第1组

row2：第一个集合对象

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

第4行第2组

第5行第一个collection2对象

第6行第二个collection2对象....

请帮忙

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>

最佳答案

有什么特殊原因需要将这些集合放在同一张表中，但要放在不同的视图中？

如果没有，那么通过连接细节数组来呈现所有细节模型将很简单：

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/

关于javascript - 创建表时在marionette.js中嵌套 View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36709971/

Collection2

javascript - 创建表时在marionette.js中嵌套 View