Skip to content

Instantly share code, notes, and snippets.

@hay hay/app.js
Last active Dec 16, 2016

Embed
What would you like to do?
Learn Javascript MVC: create a todo list using Stapes.js in less than 100 lines code (part 1) examples
var TodosModel = Stapes.subclass();
var TodosView = Stapes.subclass({
constructor : function(model) {
var self = this;
this.$el = $("#inputform");
this.model = model
var $input = this.$el.find("input");
this.$el.on('submit', function(e) {
e.preventDefault();
self.model.push( $input.val() );
$input.val('');
});
}
});
var TodosController = Stapes.subclass({
constructor : function() {
var self = this;
this.model = new TodosModel();
this.view = new TodosView( this.model );
this.model.on('change', function(todoId) {
var text = self.model.get( todoId );
$("#todos ul").append('<li>' + text + '</li>');
});
}
});
var controller = new TodosController();
this.model.push( $input.val() );
this.model.on('change', function(todoId) {
var text = this.model.get( todoId );
$("#todos ul").append('<li>' + text + '</li>');
}.bind(this));
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My todos</title>
</head>
<body>
<form id="inputform">
<input type="text" placeholder="Add a new todo..." />
</form>
<h1>my todos</h1>
<div id="todos">
<ul></ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://hay.github.com/stapes/stapes.min.js"></script>
<script src="app.js"></script>
</body>
</html>
@Naggi-Goishi

This comment has been minimized.

Copy link

Naggi-Goishi commented Dec 16, 2016

For index html, there is no longer such file so use this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.