Marionette. Renderer

http://marionettejs.com

by Preetha Srinivasan

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0/dist/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.7/backbone.marionette.min.js"></script>
<header>
<h2>Marionette.Renderer </h2>
    <script type="text/html" id="sample-template">
    <p>This is an ItemView template using handlebars<p>
    <%= value1 %></br>
    <%= value2 %></br>
    <button id="myButton">Call Marionette Renderer (do it multiple times !)</button>
</script>
<script type="text/html" id="sample-template2">
    <p>HTML added with the Rendered Object<p>
    <%= foo %></br>
</script>
</header>

<div id="container"class="well">
<div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

JavaScript

var SampleView = Backbone.Marionette.ItemView.extend({
    template : "#sample-template",
    events :{
    "click #myButton" : "callRenderer"
    }, 
    callRenderer : function () {
      var template = "#sample-template2";
      var data = {foo: "I was appended with Marionette Renderer"};
      var html = Backbone.Marionette.Renderer.render(template, data);  
      this.$el.append(html);
    }                                                    
});

var SampleModel = Backbone.Model.extend({
    defaults : {
        value1 : "A random Value",
        value2 : "Another Random Value"
    }
})
var sampleModel = new SampleModel();
var sampleView = new SampleView({model:sampleModel, el : '#container'});
sampleView.render();