[API] Begin adding View

src/MCT.js

@@ -13,6 +13,7 @@ define([
     Object.keys(api).forEach(function (k) {
         MCT.prototype[k] = api[k];
     });
+    MCT.prototype.MCT = MCT;
 
     MCT.prototype.type = function (key, type) {
         var legacyDef = type.toLegacyDefinition();

src/api/View.js

@@ -0,0 +1,20 @@
+define(['EventEmitter'], function (EventEmitter) {
+    function View() {
+        EventEmitter.call(this);
+        this.state = { elements: [], model: undefined };
+    }
+
+    View.prototype = Object.create(EventEmitter.prototype);
+
+    ['elements', 'model'].forEach(function (method) {
+        View.prototype[method] = function (value) {
+            if (arguments.length > 0) {
+                this.state[method] = value;
+                this.emit(method, value);
+            }
+            return this.state[method];
+        }
+    });
+
+    return View;
+});

tutorials/todo/todo.js

@@ -1,4 +1,11 @@
-define(function () {
+define([
+    "text!./todo.html",
+    "text!./todo-task.html",
+    "zepto"
+], function (todoTemplate, taskTemplate, $) {
+    /**
+     * @param {mct.MCT} mct
+     */
     return function todoPlugin(mct) {
         var todoType = new mct.Type({
             metadata: {
@@ -12,6 +19,29 @@ define(function () {
             creatable: true
         });
 
+        todoType.view(mct.regions.main, function (domainObject) {
+            var view = new mct.View();
+
+            function render() {
+                var domainObject = view.model();
+                var $els = $(view.elements());
+                var tasks = domainObject.getModel().tasks;
+                var $message = $els.find('.example-message');
+                var $buttons = {
+                    all: $els.find('.example-todo-button-all'),
+                    incomplete: $els.find('.example-todo-button-incomplete'),
+                    complete: $els.find('.example-todo-button-complete')
+                };
+
+                $message.toggle(tasks.length < 1);
+            }
+
+            view.elements($(todoTemplate));
+            view.on('model', render);
+            view.model(domainObject);
+            return view;
+        });
+
         mct.type('example.todo', todoType);
 
         return mct;