Skip to content

Instantly share code, notes, and snippets.

@hay

hay/app.js

Last active December 16, 2016 04:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hay/3144232 to your computer and use it in GitHub Desktop.
Save hay/3144232 to your computer and use it in GitHub Desktop.
Download ZIP
Learn Javascript MVC: create a todo list using Stapes.js in less than 100 lines code (part 1) examples
Raw
app.js
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();
Raw
ex3.js
this.model.push( $input.val() );
Raw
ex4.js
this.model.on('change', function(todoId) {
var text = this.model.get( todoId );
$("#todos ul").append('<li>' + text + '</li>');
}.bind(this));
Raw
index.html
<!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
Copy link

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