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

Nested views in marionette.js when creating a table

本文关键字：嵌套 视图 js marionete 创建      更新时间：2023-09-26

我有两个集合："collection"answers"collection2"。我不知道如何将这两个集合都呈现到表中，但将它们保存在不同的视图中。示例：

第1行：第1组，

第2行：第一个收集对象

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

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

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

如果没有，那么通过连接细节数组来渲染所有细节模型是很简单的：

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/

相关文章：