JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script id="view-a-template" type="text/x-jquery-tmpl">
<div class="button">
<a href="#">${id} - Click me!</a>
</div>
</script>
<script id="view-b-template" type="text/x-jquery-tmpl">
<div class="button">
<a href="#">${id} - Click me too!</a>
</div>
</script>
<script id="view-wrapper-template" type="text/x-jquery-tmpl">
<div class="view">
</div>
</script>
<div id="views">
</div>
CSS
.button{
margin-bottom: 10px;
}
JavaScript
$(document).ready(function(){
var myModel = Backbone.Model.extend({});
// A Backbone collection
var myCollection = Backbone.Collection.extend({
model: myModel
});
// A custom view using internal events
var myViewA = Backbone.View.extend({
render: function(){
// Using jQuery templates (http://github.com/jquery/jquery-tmpl)
var templateHTML = $('#view-a-template').tmpl(this.model.toJSON());
// Add the template html to this view
this.$el.html(templateHTML);
},
events: {
'click a': 'buttonClick'
},
buttonClick: function(e){
e.preventDefault();
alert('View A (modelId: '+this.model.id+') button is clicked');
}
});
// A custom view using internal events
var myViewB = Backbone.View.extend({
render: function(){
// Using jQuery templates (http://github.com/jquery/jquery-tmpl)
var templateHTML = $('#view-b-template').tmpl(this.model.toJSON());
// Add the template html to this view
this.$el.html(templateHTML);
},
events:{
'click a': 'buttonClick'
},
buttonClick: function(e){
e.preventDefault();
alert('View B (modelId: '+this.model.id+') button is clicked');
}
});
// Add more custom views here... (myViewC, myViewD)
var myHolderView = Backbone.View.extend({
el: '#views',
render: function(){
// This is because 'this' change inside the collection.each
var $this = this;
// If you want a wrapper template
var wrapperHtml = $('#view-wrapper-template').tmpl();
$this.$el.append(wrapperHtml);
$wrapper = $this.$el.find('> div'); // If wrapper is a div
$this.collection.each(function(model){
//...