javascript - Nested views in marionette.js when creating a table -
i have 2 collections: "collection" , "collection2". can't figure out how render both of these collections table, keep them in separate views. example:
row1: group 1,
row2: first collection object
row3.. second collection object ....
row 4 group 2,
row 5 first collection2 object
row 6 second collection2 object ....
please
js
(function() { // here's list of objects displaying var = 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 , 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 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>
any particular reason these collections need put in same table kept in separate views?
if not, straightforward render detail models concatenating details arrays:
var detailsarrays = a.data.map(function(d) { return d.detail }); var details = _.flatten(detailsarrays); // put details objects 1 array var collection = new backbone.collection(details); fiddle: https://jsfiddle.net/dkrg80yd/
Comments
Post a Comment