MarionetteJS (Backbone.Marionette) Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.8/backbone.marionette.js"></script>
<script id="listitem-template" type="x-template/underscore">
	<li>{{title}}</h1>
</script>

<div class="container">
    <p>
      <button type="button">Add items</button>
    </p>
    <ul class="list">
      <li>Initial rendered result</li>
    </ul>
</div>

JavaScript

const model = Backbone.Model.extend({
	items: [
  	{
    	title: "Some item"
    },
    {
    	title: "Another item"
    }
  ]
});

const listItemView = Marionette.View.extend({
  template: '#listItem-template'
});

const listView = Marionette.CollectionView.extend({
	collection: new Backbone.Collection(),
  childView(item) {
      return listItemView
  }
});

// Itemview
const containerView = Marionette.ItemView.extend({
    //tagName: "li",
    ui: {
        appendbtn: 'button'
    },
    events: {
        'click @ui.appendbtn': 'addResults'
    },
    addResults: function () {
        
        var list = new listView({
        	model: model
        })
        
        
        
        console.log(list.render())
        
        this.$el.find('.list').append(list.render());
    }
});

var viewInstance = new containerView({
    el: '.container'
});