update to latest maria.js and associated changes in the app

labs/architecture-examples/maria/src/js/bootstrap.js

@@ -2,15 +2,19 @@ maria.addEventListener(window, 'load', function() {
     var loading = document.getElementById('loading');
     loading.parentNode.removeChild(loading);
 
+    var model;
     if ((typeof localStorage === 'object') && (typeof JSON === 'object')) {
         var store = localStorage.getItem('todos-maria');
-        var model = store ? checkit.TodosModel.fromJSON(JSON.parse(store)) :
-                            new checkit.TodosModel();
+        model = store ? checkit.TodosModel.fromJSON(JSON.parse(store)) :
+                        new checkit.TodosModel();
         evento.addEventListener(model, 'change', function() {
             localStorage.setItem('todos-maria', JSON.stringify(model.toJSON()));
         });
     }
+    else {
+        model = new checkit.TodosModel();
+    }
 
-    var app = new checkit.TodosAppView(model);
-    document.body.appendChild(app.getRootEl());
+    var view = new checkit.TodosAppView(model);
+    document.body.appendChild(view.build());
 });

labs/architecture-examples/maria/src/js/views/TodoView.js

@@ -10,22 +10,25 @@ maria.ElementView.subclass(checkit, 'TodoView', {
         'blur      .todo-input'  : 'onBlurInput'
     },
     properties: {
-        update: function() {
+        buildData: function() {
             var model = this.getModel();
             var content = model.getContent();
             this.find('.todo-content').innerHTML =
                 content.replace('&', '&amp;').replace('<', '&lt;');
             this.find('.check').checked = model.isDone();
-            aristocrat[model.isDone() ? 'addClass' : 'removeClass'](this.getRootEl(), 'done');
+            aristocrat[model.isDone() ? 'addClass' : 'removeClass'](this.find('.todo'), 'done');
+        },
+        update: function() {
+            this.buildData();
         },
         showEdit: function() {
             var input = this.find('.todo-input');
             input.value = this.getModel().getContent();
-            aristocrat.addClass(this.getRootEl(), 'editing');
+            aristocrat.addClass(this.find('.todo'), 'editing');
             input.select();
         },
         showDisplay: function() {
-            aristocrat.removeClass(this.getRootEl(), 'editing');
+            aristocrat.removeClass(this.find('.todo'), 'editing');
         },
         getInputValue: function() {
             return this.find('.todo-input').value;

labs/architecture-examples/maria/src/js/views/TodosAppView.js

@@ -8,10 +8,6 @@ maria.ElementView.subclass(checkit, 'TodosAppView', {
         },
         initialize: function() {
             var model = this.getModel();
-            if (!model) {
-                model = new checkit.TodosModel();
-                this.setModel(model);
-            }
             this.appendChild(new checkit.TodosInputView(model));
             this.appendChild(new checkit.TodosToolbarView(model));
             this.appendChild(new checkit.TodosListView(model));

labs/architecture-examples/maria/src/js/views/TodosInputView.js

 maria.ElementView.subclass(checkit, 'TodosInputView', {
-    modelConstructor: checkit.TodosModel,
     uiActions: {
         'focus    .new-todo': 'onFocusInput'   ,
         'blur     .new-todo': 'onBlurInput'    ,

labs/architecture-examples/maria/src/js/views/TodosListView.js

 maria.SetView.subclass(checkit, 'TodosListView', {
-    modelConstructor: checkit.TodosModel,
     properties: {
         createChildView: function(todoModel) {
             return new checkit.TodoView(todoModel);

labs/architecture-examples/maria/src/js/views/TodosStatsView.js

 maria.ElementView.subclass(checkit, 'TodosStatsView', {
-    modelConstructor: checkit.TodosModel,
     properties: {
-        update: function() {
+        buildData: function() {
             this.find('.todos-count').innerHTML = this.getModel().length;
+        },
+        update: function() {
+            this.buildData();
         }
     }
 });

labs/architecture-examples/maria/src/js/views/TodosToolbarView.js

 maria.ElementView.subclass(checkit, 'TodosToolbarView', {
-    modelConstructor: checkit.TodosModel,
     uiActions: {
         'click .allCheckbox'   : 'onClickAllCheckbox'  ,
         'click .markallDone'   : 'onClickMarkAllDone'  ,
@@ -7,11 +6,14 @@ maria.ElementView.subclass(checkit, 'TodosToolbarView', {
         'click .deleteComplete': 'onClickDeleteDone'
     },
     properties: {
-        update: function() {
+        buildData: function() {
             var model = this.getModel();
             var checkbox = this.find('.allCheckbox');
             checkbox.checked = model.isAllDone();
             checkbox.disabled = model.isEmpty();
+        },
+        update: function() {
+            this.buildData();
         }
     }
 });