JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<a href="#image">image</a>
<a href="#other">other</a>
<a href="#mikesview">mikes test</a>
<div data-container></div>
<div id="posts-output"></div>
CSS
body {
margin: 10px;
font: 13px/1.3 Arial;
}
JavaScript
var LayoutView = Backbone.View.extend({
el : '[data-container]',
show : function (view) {
// remove current view
this.$view && this.$view.remove();
// save link to the new view
this.$view = view;
// render new view and append to our element
this.$el.html(this.$view.render().el);
}
});
var ImageView = Backbone.View.extend({
template : _.template('<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/1375054_4823566966612_1010607077_n.jpg"/>'),
render : function () {
this.$el.html(this.template());
this.$('img').on('load', _.bind(this.onLoad, this));
return this;
},
onLoad : function () {
console.log('onLoad');
}
});
var OtherView = Backbone.View.extend({
template : _.template('lalala'),
render : function () {
this.$el.html(this.template());
return this;
}
});
var MikesView = Backbone.View.extend({
el: $('#posts-output'),
//template : _.template('<div><h1></h1></div>'),
initialize: function() {
var self = this;
this.collection = new Archive();
this.collection.fetch().done(function(){
self.render();
});
},
render: function() {
var selfel = this.$el;
console.log('log el.', selfel);
this.collection.each(function(log) {
console.log('log item.', log);
selfel.html('hello there!');
});
}
/*template : _.template('<div><h1></h1></div>'),
render : function () {
var posts = new Archive();
posts.fetch( { reset : true } );
console.log(posts);
this.$el.html(posts.models.toJSON());
return this;
}*/
});
var Router = Backbone.Router.extend({
routes : {
'other' : 'other',
'mikesview' : 'mikesview',
'*any' : 'image'
},
initialize : function (options) {
this.layout = new LayoutView();
},
other : function () {
...