Setup
first thing we need to setup a directory where we can put the application and the library.
I've created a folder called todomvc with two folders underneath it, lib and js. First thing I need to do is put in the closure library. You can get the closure library from here: http://code.google.com/p/closure-library/downloads/list
Next I need to put in PlastronJS which I can get from here: https://github.com/rhysbrettbowen/PlastronJS
Put those two under the lib folder.
Now under the js folder create a file called min.'s and insert this code:
goog.provide('todomvc.main');
goog.require('mvc.Model');
todomvc.main = function() {
this.a = mvc.Model.create();
};
All that it's doing is providing the todo.mvc function, requiring our mvc.Model and giving us a function to create a model.
Now we need some HTML to display, pop this in main.html which you can create under the root:
<!doctype html>
<html>
<head>
<title>Example: TodoMVC</title>
</head>
<body>
<div id="hello"></div>
<script src="lib/closure-library/closure/goog/base.js"></script>
<script src="deps.js"></script>
<script src="js/main.js"></script>
</body>
</html>
last we need to create the deps.js which is a dependency map of the js files we need to use. Head over to your command line and put in:
lib/closure-library/closure/bin/calcdeps.py --dep lib/closure-library --input js/main.js --path lib/plastronjs --path lib/plastronjs/sync --path js/ --output_mode deps > deps.js
Now we need some HTML to display, pop this in main.html which you can create under the root:
<!doctype html>
<html>
<head>
<title>Example: TodoMVC</title>
</head>
<body>
<div id="hello"></div>
<script src="lib/closure-library/closure/goog/base.js"></script>
<script src="deps.js"></script>
<script src="js/main.js"></script>
</body>
</html>
last we need to create the deps.js which is a dependency map of the js files we need to use. Head over to your command line and put in:
lib/closure-library/closure/bin/calcdeps.py --dep lib/closure-library --input js/main.js --path lib/plastronjs --path lib/plastronjs/sync --path js/ --output_mode deps > deps.js
Run it
That should be all you need to start. You can open the page in your browser and you won't see much. Open up your javascript console and put in
You can then play around with the model through a.a
Next post we'll got through creating the models for the todo items and how to use them with sync
var a = new todomvc.main();
You can then play around with the model through a.a
a.a.set('a',1);
a.a.get('a') // 1
b = a.getBinder('a');
b(); // 1
b(2);
a.a.get('a') // 2
Next post we'll got through creating the models for the todo items and how to use them with sync
No comments:
Post a Comment