Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 2, 2015 10:35
Show Gist options
  • Save anonymous/83424979a35f0d191aab to your computer and use it in GitHub Desktop.
Save anonymous/83424979a35f0d191aab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<style id="jsbin-css">
.b1-sel {
color: #f00;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.1.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.1.2/backbone-min.js"></script>
<body>
<h2>App</h2>
<div class="app">
</div>
<script id="jsbin-javascript">
var App = Backbone.View.extend({
el: '.app',
go: function() {
var self = this;
this.def = $.Deferred();
this.beforeRender().then(function() {
self.render().then(function() {
self.afterRender();
});
});
},
beforeRender: function() {
alert('before');
this.def.resolve();
return this.def;
},
render: function() {
this.def = $.Deferred();
var childs = this.childs;
this.$el.html('');
for (var i =0; i<childs.length; i++) {
this.$el.append(childs[i].render());
this.childs[i].delegateEvents();
}
this.def.resolve();
return this.def;
},
afterRender: function(){
alert('after');
}
});
var B1 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b1</div>');
var b3 = new B3();
this.$el.append(b3.render());
return this.el;
},
events: {
click: function() {
this.$el.addClass('b1-sel');
getData(this.$el.text());
b2.init = true;
router.navigate('another',{trigger: true});
}
}
});
function getData(t) {
c = t;
}
var B2 = Backbone.View.extend({
init: false,
render: function() {
this.$el.html(c + ' another');
return this.el;
}
});
var B3 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b3</div>');
return this.el;
},
events: {
click: function() {
alert();
}
}
});
var Router = Backbone.Router.extend({
routes: {
"":"home",
"another": "another"
}
});
var app = new App();
var b1 = new B1();
var b2 = new B2();
var router = new Router();
var c = '';
router.on('route:another', function() {
app.childs = [b2];
app.render();
});
router.on('route:home', function() {
app.childs = [b1];
app.go();
});
Backbone.history.start();
</script>
<script id="jsbin-source-css" type="text/css">.b1-sel {
color: #f00;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var App = Backbone.View.extend({
el: '.app',
go: function() {
var self = this;
this.def = $.Deferred();
this.beforeRender().then(function() {
self.render().then(function() {
self.afterRender();
});
});
},
beforeRender: function() {
alert('before');
this.def.resolve();
return this.def;
},
render: function() {
this.def = $.Deferred();
var childs = this.childs;
this.$el.html('');
for (var i =0; i<childs.length; i++) {
this.$el.append(childs[i].render());
this.childs[i].delegateEvents();
}
this.def.resolve();
return this.def;
},
afterRender: function(){
alert('after');
}
});
var B1 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b1</div>');
var b3 = new B3();
this.$el.append(b3.render());
return this.el;
},
events: {
click: function() {
this.$el.addClass('b1-sel');
getData(this.$el.text());
b2.init = true;
router.navigate('another',{trigger: true});
}
}
});
function getData(t) {
c = t;
}
var B2 = Backbone.View.extend({
init: false,
render: function() {
this.$el.html(c + ' another');
return this.el;
}
});
var B3 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b3</div>');
return this.el;
},
events: {
click: function() {
alert();
}
}
});
var Router = Backbone.Router.extend({
routes: {
"":"home",
"another": "another"
}
});
var app = new App();
var b1 = new B1();
var b2 = new B2();
var router = new Router();
var c = '';
router.on('route:another', function() {
app.childs = [b2];
app.render();
});
router.on('route:home', function() {
app.childs = [b1];
app.go();
});
Backbone.history.start();</script>
Raw
jsbin.zavakewupu.css
.b1-sel {
color: #f00;
}
Raw
jsbin.zavakewupu.js
var App = Backbone.View.extend({
el: '.app',
go: function() {
var self = this;
this.def = $.Deferred();
this.beforeRender().then(function() {
self.render().then(function() {
self.afterRender();
});
});
},
beforeRender: function() {
alert('before');
this.def.resolve();
return this.def;
},
render: function() {
this.def = $.Deferred();
var childs = this.childs;
this.$el.html('');
for (var i =0; i<childs.length; i++) {
this.$el.append(childs[i].render());
this.childs[i].delegateEvents();
}
this.def.resolve();
return this.def;
},
afterRender: function(){
alert('after');
}
});
var B1 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b1</div>');
var b3 = new B3();
this.$el.append(b3.render());
return this.el;
},
events: {
click: function() {
this.$el.addClass('b1-sel');
getData(this.$el.text());
b2.init = true;
router.navigate('another',{trigger: true});
}
}
});
function getData(t) {
c = t;
}
var B2 = Backbone.View.extend({
init: false,
render: function() {
this.$el.html(c + ' another');
return this.el;
}
});
var B3 = Backbone.View.extend({
render: function() {
this.$el.html('<div>b3</div>');
return this.el;
},
events: {
click: function() {
alert();
}
}
});
var Router = Backbone.Router.extend({
routes: {
"":"home",
"another": "another"
}
});
var app = new App();
var b1 = new B1();
var b2 = new B2();
var router = new Router();
var c = '';
router.on('route:another', function() {
app.childs = [b2];
app.render();
});
router.on('route:home', function() {
app.childs = [b1];
app.go();
});
Backbone.history.start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment