From 92d4bf7b072f210e65ea85b93a611a91c446d07d Mon Sep 17 00:00:00 2001
From: Henry <akhenry@gmail.com>
Date: Thu, 18 Aug 2016 21:45:46 -0700
Subject: [PATCH] Refactoring MutableObject

---
 index.html                           |   6 +-
 src/api/objects/MutableObject.js     |  12 ---
 src/api/objects/MutableObjectSpec.js |  22 +++---
 tutorials/todo/todo.js               | 111 ++++++++++++---------------
 4 files changed, 64 insertions(+), 87 deletions(-)

diff --git a/index.html b/index.html
index 454d712480..d8297d3d4a 100644
--- a/index.html
+++ b/index.html
@@ -31,10 +31,12 @@
     <script type="text/javascript">
         require(['main'], function (mct) {
             require([
+                './tutorials/todo/todo',
                 './example/imagery/bundle',
                 './example/eventGenerator/bundle',
-                './example/generator/bundle',
-            ], function () {
+                './example/generator/bundle'
+            ], function (TodoPlugin) {
+                mct.install(TodoPlugin);
                 mct.run();
             })
         });
diff --git a/src/api/objects/MutableObject.js b/src/api/objects/MutableObject.js
index c1c6b99142..4e4b4ebec0 100644
--- a/src/api/objects/MutableObject.js
+++ b/src/api/objects/MutableObject.js
@@ -14,14 +14,6 @@ define([
         this.eventEmitter = eventEmitter;
         this.object = object;
         this.unlisteners = [];
-
-        var synchronizeObject = function (object) {
-            this.object = object;
-        }.bind(this);
-
-        eventEmitter.on(qualifiedEventName(object, '*'), synchronizeObject);
-        this.unlisteners.push(eventEmitter.off.bind(eventEmitter,
-            qualifiedEventName(object, '*'), synchronizeObject));
     }
 
     function qualifiedEventName(object, eventName) {
@@ -60,9 +52,5 @@ define([
         this.eventEmitter.emit(qualifiedEventName(this.object, '*'), this.object);
     };
 
-    MutableObject.prototype.get = function (path) {
-        return _.get(this.object, path);
-    };
-
     return MutableObject;
 });
diff --git a/src/api/objects/MutableObjectSpec.js b/src/api/objects/MutableObjectSpec.js
index ecd9e85a91..57735a750c 100644
--- a/src/api/objects/MutableObjectSpec.js
+++ b/src/api/objects/MutableObjectSpec.js
@@ -54,33 +54,31 @@ define(['./MutableObject'], function (MutableObject) {
                     arrayProperty: arrayProperty
                 };
             eventEmitter = jasmine.createSpyObj('eventEmitter', [
-                'emit',
-                'on',
-                'off'
+                'emit'
             ]);
             mutableObject = new MutableObject(eventEmitter, domainObject);
         });
 
         it('Supports getting and setting of object properties', function () {
-            expect(mutableObject.get('stringProperty')).toEqual('stringValue');
+            expect(domainObject.stringProperty).toEqual('stringValue');
             mutableObject.set('stringProperty', 'updated');
-            expect(mutableObject.get('stringProperty')).toEqual('updated');
+            expect(domainObject.stringProperty).toEqual('updated');
 
             var newArrayProperty = [];
-            expect(mutableObject.get('arrayProperty')).toEqual(arrayProperty);
+            expect(domainObject.arrayProperty).toEqual(arrayProperty);
             mutableObject.set('arrayProperty', newArrayProperty);
-            expect(mutableObject.get('arrayProperty')).toEqual(newArrayProperty);
+            expect(domainObject.arrayProperty).toEqual(newArrayProperty);
 
             var newObjectProperty = [];
-            expect(mutableObject.get('objectProperty')).toEqual(objectProperty);
+            expect(domainObject.objectProperty).toEqual(objectProperty);
             mutableObject.set('objectProperty', newObjectProperty);
-            expect(mutableObject.get('objectProperty')).toEqual(newObjectProperty);
+            expect(domainObject.objectProperty).toEqual(newObjectProperty);
         });
 
         it('Supports getting and setting of nested properties', function () {
-            expect(mutableObject.get('objectProperty')).toEqual(objectProperty);
-            expect(mutableObject.get('objectProperty.prop1')).toEqual(objectProperty.prop1);
-            expect(mutableObject.get('objectProperty.prop3.propA')).toEqual(objectProperty.prop3.propA);
+            expect(domainObject.objectProperty).toEqual(objectProperty);
+            expect(domainObject.objectProperty.prop1).toEqual(objectProperty.prop1);
+            expect(domainObject.objectProperty.prop3.propA).toEqual(objectProperty.prop3.propA);
 
             mutableObject.set('objectProperty.prop1', 'new-prop-1');
             expect(domainObject.objectProperty.prop1).toEqual('new-prop-1');
diff --git a/tutorials/todo/todo.js b/tutorials/todo/todo.js
index 75a4bc5d46..0d9d403b81 100644
--- a/tutorials/todo/todo.js
+++ b/tutorials/todo/todo.js
@@ -26,7 +26,7 @@ define([
 
         function TodoView(domainObject) {
             this.domainObject = domainObject;
-            this.mutableObject = undefined;
+            this.mutableObject = mct.Objects.getMutable(domainObject)
 
             this.filterValue = "all";
             this.render = this.render.bind(this);
@@ -34,36 +34,30 @@ define([
         }
 
         TodoView.prototype.objectChanged = function (object) {
-            if (this.mutableObject) {
-                this.mutableObject.stopListening();
-            }
-            this.mutableObject = mct.Objects.getMutable(object);
-            this.render();
-
-            //If anything on object changes, re-render view
-            this.mutableObject.on("*", this.objectChanged);
+            this.render(object);
         };
 
         TodoView.prototype.show = function (container) {
             var self = this;
             this.destroy();
 
-            mct.Objects.get(utils.parseKeyString(self.domainObject.getId())).then(function (object) {
-                self.$els = $(todoTemplate);
-                self.$buttons = {
-                    all: self.$els.find('.example-todo-button-all'),
-                    incomplete: self.$els.find('.example-todo-button-incomplete'),
-                    complete: self.$els.find('.example-todo-button-complete')
-                };
+            self.$els = $(todoTemplate);
+            self.$buttons = {
+                all: self.$els.find('.example-todo-button-all'),
+                incomplete: self.$els.find('.example-todo-button-incomplete'),
+                complete: self.$els.find('.example-todo-button-complete')
+            };
 
-                $(container).empty().append(self.$els);
+            $(container).empty().append(self.$els);
 
 
-                self.initialize();
-                self.objectChanged(object);
+            self.initialize();
+            self.objectChanged(this.domainObject);
 
-                mct.selection.on('change', self.render);
-            });
+            mct.selection.on('change', self.render);
+
+            //If anything on object changes, re-render view
+            this.mutableObject.on("*", this.objectChanged);
         };
 
         TodoView.prototype.destroy = function () {
@@ -84,10 +78,10 @@ define([
             }, this);
         };
 
-        TodoView.prototype.render = function () {
+        TodoView.prototype.render = function (domainObject) {
             var $els = this.$els;
-            var mutableObject = this.mutableObject;
-            var tasks = mutableObject.get('tasks');
+            var mutableObject = mct.Objects.getMutable(domainObject);
+            var tasks = domainObject.tasks;
             var $message = $els.find('.example-message');
             var $list = $els.find('.example-todo-task-list');
             var $buttons = this.$buttons;
@@ -140,55 +134,50 @@ define([
 
         function TodoToolbarView(domainObject) {
             this.domainObject = domainObject;
-            this.mutableObject = undefined;
             this.handleSelectionChange = this.handleSelectionChange.bind(this);
+            this.mutableObject = mct.Objects.getMutable(domainObject);
         }
 
         TodoToolbarView.prototype.show = function (container) {
             var self = this;
             this.destroy();
 
-            mct.Objects.get(utils.parseKeyString(this.domainObject.getId())).then(function (wrappedObject){
+            var $els = $(toolbarTemplate);
+            var $add = $els.find('a.example-add');
+            var $remove = $els.find('a.example-remove');
 
-                self.mutableObject = mct.Objects.getMutable(wrappedObject);
+            $(container).append($els);
 
-                var $els = $(toolbarTemplate);
-                var $add = $els.find('a.example-add');
-                var $remove = $els.find('a.example-remove');
+            $add.on('click', function () {
+                var $dialog = $(dialogTemplate),
+                    view = {
+                        show: function (container) {
+                            $(container).append($dialog);
+                        },
+                        destroy: function () {}
+                    };
 
-                $(container).append($els);
-
-                $add.on('click', function () {
-                    var $dialog = $(dialogTemplate),
-                        view = {
-                            show: function (container) {
-                                $(container).append($dialog);
-                            },
-                            destroy: function () {}
-                        };
-
-                    mct.dialog(view, "Add a Task").then(function () {
-                        var description = $dialog.find('input').val();
-                        var tasks = self.mutableObject.get('tasks');
-                        tasks.push({ description: description });
-                        self.mutableObject.set('tasks', tasks);
-                    });
+                mct.dialog(view, "Add a Task").then(function () {
+                    var description = $dialog.find('input').val();
+                    var tasks = self.domainObject.tasks;
+                    tasks.push({ description: description });
+                    self.mutableObject.set('tasks', tasks);
                 });
-                $remove.on('click', function () {
-                    var index = mct.selection.selected()[0].index;
-                    if (index !== undefined) {
-                        var tasks = self.mutableObject.get('tasks').filter(function (t, i) {
-                            return i !== index;
-                        });
-                        self.mutableObject.set("tasks", tasks);
-                        self.mutableObject.set("selected", undefined);
-                        mct.selection.clear();
-                    }
-                });
-                self.$remove = $remove;
-                self.handleSelectionChange();
-                mct.selection.on('change', self.handleSelectionChange);
             });
+            $remove.on('click', function () {
+                var index = mct.selection.selected()[0].index;
+                if (index !== undefined) {
+                    var tasks = self.mutableObject.tasks.filter(function (t, i) {
+                        return i !== index;
+                    });
+                    self.mutableObject.set("tasks", tasks);
+                    self.mutableObject.set("selected", undefined);
+                    mct.selection.clear();
+                }
+            });
+            self.$remove = $remove;
+            self.handleSelectionChange();
+            mct.selection.on('change', self.handleSelectionChange);
         };
 
         TodoToolbarView.prototype.handleSelectionChange = function () {