Marionette: Render Collection using ItemView

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js"></script>
<div id="region"></div>

<script type="text/html" id="table">
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Esse iste recusandae quisquam voluptas dolorum, fugiat quaerat, dicta eum cupiditate rerum quas expedita quasi officiis quia harum quo, laborum vel debitis.. </p>
    
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                </tr> 
            </thead>
            <tbody class="js-tbody">
                <% _.each(items, function(model) { %>
                <tr>
                    <td><%- model.id %></td>
                    <td><%- model.name %></td>
                </tr>
                <% }) %>
            </tbody> 
        </table>
</script>

JavaScript

console.clear();

var people = [{
    id: 1,
    name: 'Kyle'
}, {
    id: 2,
    name: 'Peter'
}];

// Create a Person Model
var Person = Backbone.Model.extend({});

// Create a People Collection
var People = Backbone.Collection.extend({
    model: Person
});

// Create a TableRowView -> ItemView
var Table = Marionette.ItemView.extend({
    
    template: '#table',
    
    initialize: function() {
        this.collection.forEach(function(model) {
            console.log(model);
        });
    },
    
    onRender: function() {
        console.log('on render complete');
    }
});

var region = new Backbone.Marionette.Region({ 
    el: '#region'
});

// Setup
var newPeople = new People(people);

var table = new Table({
    collection: newPeople
});

region.show(table);