Last active
December 16, 2016 04:30
-
-
Save hay/3144232 to your computer and use it in GitHub Desktop.
Learn Javascript MVC: create a todo list using Stapes.js in less than 100 lines code (part 1) examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.model.push( $input.val() ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.model.on('change', function(todoId) { | |
var text = this.model.get( todoId ); | |
$("#todos ul").append('<li>' + text + '</li>'); | |
}.bind(this)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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>