smokinjoe/gist:5542209ce4d80b20b75c

## gistfile1.txt
<!doctype html>
<title>My Appola</title>
<script src="lodash.js"></script>
<script src="JocalStorage.js"></script>
<script src="mithril.js"></script>
<script>
  JocalStorage.init();

  // create mithril module
  var todo = {};

  // use todo module to namespace two model entities
  todo.Todo = function (data) {
    this.description = m.prop(data.description);
    this.done = m.prop(false);
  };

  todo.TodoList = Array;

  // initialize & use Todo and TodoList classes
  //var myTask = new todo.Todo({ description: "write code" });
  //myTask.description(); // Write code;
  //myTask.done(true);
  //var list = new todo.TodoList();

  // Define the view-model
  todo.vm = (function () {
    var vm = {};
    vm.init = function () {
      // running list of todos
      vm.list = new todo.TodoList();
      // slot to store the name of a new todo before created
      vm.description = m.prop("");
      // adds a todo to the list and clears the description field for user convenience
      vm.add = function (description) {
        if (description()) {
          vm.list.push(new todo.Todo({ description: description }));
          vm.description("");
        }
      };
      vm.view = function () {
        console.log("JOE: vm.list: ", vm.list);
      };
    };

    return vm;
  }());

  // Initialize and use the view-model
  todo.vm.init();
  //todo.vm.description(); // [empty string]

  // try adding a todo
  //todo.vm.add(todo.vm.description);
  //todo.vm.list.length; // 0, because you can't add todo with empty description

  // add a todo properly
  //todo.vm.description("lorem ipsum");
  //todo.vm.add(todo.vm.description);
  //todo.vm.list.length; // 1

  // all a controller needs is (at minimum)
  //todo.controller = function () {
  //  todo.vm.init();
  //};

  // now for the view
  todo.view = function () {
    return m("html", [
      m("body", [
        m("input"),
        m("button", "Add"),
        m("table", [
          m("tr", [
            m("td", [
              m("input[type=checkbox]")
            ]),
            m("td", "task description"),
          ])
        ])
      ])
    ]);
  };

  // attach view to document
  m.render(document, todo.view());


  // binding a model value to an input in a template
  //m("input", { value: todo.vm.description('asdf') });

  // attach the view to the document
  //m.render(document, todo.view());

  //todo.vm.description("Write code"); //set the description in the controller
  //m.render(document, todo.view()); // input now says "Write code"

</script>
	<!doctype html>
	<title>My Appola</title>
	<script src="lodash.js"></script>
	<script src="JocalStorage.js"></script>
	<script src="mithril.js"></script>
	<script>
	JocalStorage.init();

	// create mithril module
	var todo = {};

	// use todo module to namespace two model entities
	todo.Todo = function (data) {
	this.description = m.prop(data.description);
	this.done = m.prop(false);
	};

	todo.TodoList = Array;

	// initialize & use Todo and TodoList classes
	//var myTask = new todo.Todo({ description: "write code" });
	//myTask.description(); // Write code;
	//myTask.done(true);
	//var list = new todo.TodoList();

	// Define the view-model
	todo.vm = (function () {
	var vm = {};
	vm.init = function () {
	// running list of todos
	vm.list = new todo.TodoList();
	// slot to store the name of a new todo before created
	vm.description = m.prop("");
	// adds a todo to the list and clears the description field for user convenience
	vm.add = function (description) {
	if (description()) {
	vm.list.push(new todo.Todo({ description: description }));
	vm.description("");
	}
	};
	vm.view = function () {
	console.log("JOE: vm.list: ", vm.list);
	};
	};

	return vm;
	}());

	// Initialize and use the view-model
	todo.vm.init();
	//todo.vm.description(); // [empty string]

	// try adding a todo
	//todo.vm.add(todo.vm.description);
	//todo.vm.list.length; // 0, because you can't add todo with empty description

	// add a todo properly
	//todo.vm.description("lorem ipsum");
	//todo.vm.add(todo.vm.description);
	//todo.vm.list.length; // 1

	// all a controller needs is (at minimum)
	//todo.controller = function () {
	// todo.vm.init();
	//};

	// now for the view
	todo.view = function () {
	return m("html", [
	m("body", [
	m("input"),
	m("button", "Add"),
	m("table", [
	m("tr", [
	m("td", [
	m("input[type=checkbox]")
	]),
	m("td", "task description"),
	])
	])
	])
	]);
	};

	// attach view to document
	m.render(document, todo.view());



	// binding a model value to an input in a template
	//m("input", { value: todo.vm.description('asdf') });

	// attach the view to the document
	//m.render(document, todo.view());

	//todo.vm.description("Write code"); //set the description in the controller
	//m.render(document, todo.view()); // input now says "Write code"

	</script>