Skip to content

Instantly share code, notes, and snippets.

@gronke

gronke/index.html

Created May 20, 2015 11:37
Show Gist options
  • Save gronke/35481ac27afdea3aae5e to your computer and use it in GitHub Desktop.
Save gronke/35481ac27afdea3aae5e to your computer and use it in GitHub Desktop.
Download ZIP
Ist heute Maschinendeck Treffen? // source http://jsbin.com/coheve
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ist heute Maschinendeck Treffen?</title>
<style>
body {
text-align: center;
font-family: Helvetica;
}
#state {
font-size: 25px;
}
</style>
<style id="jsbin-css">
ul, li {
display: block;
position: relative;
padding: 1em;
}
.done {
color: #ccc;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Ist heute Maschinendeck Treffen?</h1>
<div id="state"></div>
<script>
document.querySelector('#state').innerHTML = ((new Date()).getDay() === 3) ? "Ja" : "Nein";
</script>
<script id="jsbin-javascript">
(function () {
var TODOModel = Promenade.Model.extend({
type: 'todo',
defaults: {
done: false,
description: ''
}
});
var TODOCollection = Promenade.Collection.extend({
model: TODOModel
});
var TODOController = Promenade.Controller.extend({
defineRoutes: function () {
this.handle('', 'defaultRoute');
this.handle('create', 'createTodo');
},
defaultRoute: function () {
this.app.redirect('create');
},
createTodo: function () {
this.app.view.contentRegion.show(new TODOListView({
collection: this.app.todoCollection
}));
}
});
var TODONewView = Promenade.View.extend({
tagName: 'form',
template: 'new',
events: {
'submit': 'handleSubmit'
},
handleSubmit: function (e) {
this.collection.add(new TODOModel({
description: this.getDescriptionText()
}));
// Cancel the default form behavior:
return false;
},
getDescriptionText: function () {
return this.$el.find('input').val();
}
});
var TODOItemView = Promenade.View.extend({
tagName: 'li',
template: 'item',
events: {
'click input': 'toggleDone'
},
toggleDone: function () {
this.model.set(
'done',
!this.model.get('done')
);
this.$el.toggleClass(
'done',
this.model.get('done')
);
}
});
var TODOListView = Promenade.CollectionView.extend({
tagName: 'div',
template: 'list',
layout: {
'new': '.new-region',
'outlet': '.outlet-region'
},
itemClass: TODOItemView,
initialize: function () {
Promenade.CollectionView.prototype.initialize.apply(this, arguments);
this.newRegion.show(new TODONewView({
collection: this.collection
}));
}
});
var TODOApplication = Promenade.Application.extend({
models: [
TODOCollection
],
controllers: [
TODOController
],
view: Promenade.View.extend({
el: document.body,
layout: {
'content': ''
}
})
});
window.app = new TODOApplication();
app.initializes.then(function () {
Backbone.history.start();
console.log('Done!');
});
})();
</script>
<script id="jsbin-source-css" type="text/css">ul, li {
display: block;
position: relative;
padding: 1em;
}
.done {
color: #ccc;
text-decoration: line-through;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
(function () {
var TODOModel = Promenade.Model.extend({
type: 'todo',
defaults: {
done: false,
description: ''
}
});
var TODOCollection = Promenade.Collection.extend({
model: TODOModel
});
var TODOController = Promenade.Controller.extend({
defineRoutes: function () {
this.handle('', 'defaultRoute');
this.handle('create', 'createTodo');
},
defaultRoute: function () {
this.app.redirect('create');
},
createTodo: function () {
this.app.view.contentRegion.show(new TODOListView({
collection: this.app.todoCollection
}));
}
});
var TODONewView = Promenade.View.extend({
tagName: 'form',
template: 'new',
events: {
'submit': 'handleSubmit'
},
handleSubmit: function (e) {
this.collection.add(new TODOModel({
description: this.getDescriptionText()
}));
// Cancel the default form behavior:
return false;
},
getDescriptionText: function () {
return this.$el.find('input').val();
}
});
var TODOItemView = Promenade.View.extend({
tagName: 'li',
template: 'item',
events: {
'click input': 'toggleDone'
},
toggleDone: function () {
this.model.set(
'done',
!this.model.get('done')
);
this.$el.toggleClass(
'done',
this.model.get('done')
);
}
});
var TODOListView = Promenade.CollectionView.extend({
tagName: 'div',
template: 'list',
layout: {
'new': '.new-region',
'outlet': '.outlet-region'
},
itemClass: TODOItemView,
initialize: function () {
Promenade.CollectionView.prototype.initialize.apply(this, arguments);
this.newRegion.show(new TODONewView({
collection: this.collection
}));
}
});
var TODOApplication = Promenade.Application.extend({
models: [
TODOCollection
],
controllers: [
TODOController
],
view: Promenade.View.extend({
el: document.body,
layout: {
'content': ''
}
})
});
window.app = new TODOApplication();
app.initializes.then(function () {
Backbone.history.start();
console.log('Done!');
});
})();</script></body>
</html>
Raw
jsbin.coheve.css
ul, li {
display: block;
position: relative;
padding: 1em;
}
.done {
color: #ccc;
text-decoration: line-through;
}
Raw
jsbin.coheve.js
(function () {
var TODOModel = Promenade.Model.extend({
type: 'todo',
defaults: {
done: false,
description: ''
}
});
var TODOCollection = Promenade.Collection.extend({
model: TODOModel
});
var TODOController = Promenade.Controller.extend({
defineRoutes: function () {
this.handle('', 'defaultRoute');
this.handle('create', 'createTodo');
},
defaultRoute: function () {
this.app.redirect('create');
},
createTodo: function () {
this.app.view.contentRegion.show(new TODOListView({
collection: this.app.todoCollection
}));
}
});
var TODONewView = Promenade.View.extend({
tagName: 'form',
template: 'new',
events: {
'submit': 'handleSubmit'
},
handleSubmit: function (e) {
this.collection.add(new TODOModel({
description: this.getDescriptionText()
}));
// Cancel the default form behavior:
return false;
},
getDescriptionText: function () {
return this.$el.find('input').val();
}
});
var TODOItemView = Promenade.View.extend({
tagName: 'li',
template: 'item',
events: {
'click input': 'toggleDone'
},
toggleDone: function () {
this.model.set(
'done',
!this.model.get('done')
);
this.$el.toggleClass(
'done',
this.model.get('done')
);
}
});
var TODOListView = Promenade.CollectionView.extend({
tagName: 'div',
template: 'list',
layout: {
'new': '.new-region',
'outlet': '.outlet-region'
},
itemClass: TODOItemView,
initialize: function () {
Promenade.CollectionView.prototype.initialize.apply(this, arguments);
this.newRegion.show(new TODONewView({
collection: this.collection
}));
}
});
var TODOApplication = Promenade.Application.extend({
models: [
TODOCollection
],
controllers: [
TODOController
],
view: Promenade.View.extend({
el: document.body,
layout: {
'content': ''
}
})
});
window.app = new TODOApplication();
app.initializes.then(function () {
Backbone.history.start();
console.log('Done!');
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment