PlastronJS By example pt2

what we're going to do is setup a new todo list and put in the start of the display.

So first we'll change the HTML to just call the main function with:


<script>
todomvc.main();
</script>

Next we'll create a new file under our js folder and call it list control.js - this will be the C in our MVC for the todo list. The contents of our file should look like this:

goog.provide('todomvc.listcontrol');

goog.require('goog.dom');
goog.require('mvc.Control');

todomvc.listcontrol = function(model) {
  goog.base(this, model);
};
goog.inherits(todomvc.listcontrol, mvc.Control);

todomvc.listcontrol.prototype.createDom = function() {
  this.el = goog.dom.htmlToDocumentFragment("<div>" +
    "<div>Todo</div>" +
    "<div><form><input type='text' /></form></div>" +
    "</div>");
 console.log(this.el);
 this.setElementInternal(this.el);
};

The first line is for dependancies and tells calcdeps what class the file provides.  We also need to require mvc.Control because we'll be inheriting from it.

next comes the constructor function which calls good.base(this) which tells it to call the constructor function of the class it inherits from.

goog.inherits sets up the inheritance chain.

The createDom is from good.ui.Component and is what is used to setup the DOM for the control. For now I've just put in the template as a string and used the good.dom.htmlToDocumentFragment to create the elements and then set the top element as the controls internal element.

Now we need to change min.'s to use this control:

goog.provide('todomvc.main');

goog.require('mvc.Collection');
goog.require('todomvc.listcontrol');

todomvc.main = function() {
  var todolist = new mvc.Collection();
  var todolistControl = new todomvc.listcontrol(this.todolist);
  todolistControl.createDom();
  todolistControl.render(document.body);
};

We need to require our list control and pass it a model (in this case our todo list collection). We then create the Dom and finally render it in to the document.

That should be enough to get us the title and the input box. Next we'll setup the input box to create todo models.