multiple improvements to server-side rendering

Author: astoilkov

dist/blocks-source.js

@@ -4981,19 +4981,18 @@ return result;
       }
     },
 
-    updateChildren: function (domQuery, collection, domElement) {
+    updateChildren: function (collection, updateCount, domQuery, domElement) {
       var template = this._template;
       var child = template[0];
       var isOneChild = template.length === 1 && VirtualElement.Is(child);
       var childNodes = domElement.childNodes;
       var syncIndex = domQuery.getSyncIndex();
       var childContexts = domQuery._context.childs;
       var chunkLength = this._length();
-      var length = Math.min(collection.length, childNodes.length);
       var index = -1;
       var context;
 
-      while (++index < length) {
+      while (++index < updateCount) {
         domQuery._context = context = childContexts[index];
         context.$this = collection[index];
         context.$parent = context.$parentContext.$this;
@@ -5882,8 +5881,12 @@ return result;
           elementData.haveData = true;
           if (!elementData.execute) {
             elementData.execute = [];
+            elementData.executeHash = {};
+          }
+          if (!elementData.executeHash[methods[i].query]) {
+             elementData.execute.push(methods[i]);
+             elementData.executeHash[methods[i].query] = true;
           }
-          elementData.execute.push(methods[i]);
           continue;
         }
         Observer.startObserving();
@@ -7277,6 +7280,7 @@ return result;
          */
         update: function () {
           var elements = this._elements;
+          var elementData;
           var domQuery;
           var context;
           var element;
@@ -7288,7 +7292,8 @@ return result;
             context = expression.context;
 
             if (!element) {
-              element = expression.element = ElementsData.data(expression.elementId).dom;
+              elementData = ElementsData.data(expression.elementId);
+              element = expression.element = elementData.dom;
             }
 
             try {
@@ -7302,15 +7307,22 @@ return result;
             offset = expression.length - value.length;
             expression.length = value.length;
 
-            if (expression.attr) {
-              element.setAttribute(expression.attr, Expression.GetValue(context, null, expression.entire));
-            } else {
-              if (element.nextSibling) {
-                element = element.nextSibling;
-                element.nodeValue = value + element.nodeValue.substring(expression.length + offset);
+            if (element) {
+              if (expression.attr) {
+                element.setAttribute(expression.attr, Expression.GetValue(context, null, expression.entire));
               } else {
-                element.parentNode.appendChild(document.createTextNode(value));
-              }
+                if (element.nextSibling) {
+                  element = element.nextSibling;
+                  element.nodeValue = value + element.nodeValue.substring(expression.length + offset);
+                } else {
+                  element.parentNode.appendChild(document.createTextNode(value));
+                }
+              }  
+            } else {
+             element = elementData.virtual;
+             if (expression.attr) {
+               element.attr(expression.attr, Expression.GetValue(context, null, expression.entire));
+             }
             }
           });
 
@@ -7443,12 +7455,13 @@ return result;
             return this;
           }
 
+          array = blocks.unwrap(array);
+          
           var current = this.__value__;
           var chunkManager = this._chunkManager;
           var addCount = array.length - current.length;
           var removeCount = Math.max(current.length - array.length, 0);
-          
-          array = blocks.unwrap(array);
+          var updateCount = array.length - addCount;
 
           Events.trigger(this, 'removing', {
             type: 'removing',
@@ -7461,12 +7474,12 @@ return result;
             items: array,
             index: 0
           });
-
+          
           chunkManager.each(function (domElement, virtualElement) {
             var domQuery = blocks.domQuery(domElement);
 
             domQuery.contextBubble(blocks.context(domElement), function () {
-                virtualElement.updateChildren(domQuery, array, domElement);
+                virtualElement.updateChildren(array, updateCount, domQuery, domElement);
             });
           });
 
@@ -7996,6 +8009,22 @@ return result;
       newObservable.view._initialized = false;
 
       newObservable.view.on('get', newObservable._getter);
+      
+      newObservable.on('add', function () {
+        if (newObservable.view._initialized) {
+          newObservable.view._connections = {};
+          newObservable.view.reset();
+          ExtenderHelper.executeOperations(newObservable);
+        }
+      });
+  
+      newObservable.on('remove', function () {
+        if (newObservable.view._initialized) {
+          newObservable.view._connections = {};
+          newObservable.view.reset();
+          ExtenderHelper.executeOperations(newObservable);
+        }
+      });
 
       return newObservable;
     },
@@ -8213,22 +8242,6 @@ return result;
       filter: callback
     });
 
-    observable.on('add', function () {
-      if (observable.view._initialized) {
-        observable.view._connections = {};
-        observable.view.reset();
-        ExtenderHelper.executeOperations(observable);
-      }
-    });
-
-    observable.on('remove', function () {
-      if (observable.view._initialized) {
-        observable.view._connections = {};
-        observable.view.reset();
-        ExtenderHelper.executeOperations(observable);
-      }
-    });
-
     return observable;
   };
 
@@ -10530,7 +10543,7 @@ return result;
      */
     read: function (params, callback) {
       // TODO: Write tests for the callback checking if it is being called
-      var context = this.__context__;
+      var _this = this;
 
       if (blocks.isFunction(params)) {
         callback = params;
@@ -10539,7 +10552,7 @@ return result;
       this._dataSource.read({
         data: params
       }, callback ? function () {
-        callback.call(context);
+        callback.call(_this.__context__);
       } : blocks.noop);
 
       return this;
@@ -11215,11 +11228,7 @@ return result;
         this._started = true;
         this._serverData = window.__blocksServerData__;
         this._createViews();
-        if (document.__mock__ && window.__mock__) {
-          this._ready(element);
-        } else {
-          blocks.domReady(blocks.bind(this._ready, this, element));
-        }
+        blocks.domReady(blocks.bind(this._ready, this, element));
       }
     },
 
@@ -11230,13 +11239,17 @@ return result;
         }, this));
       }, this);
     },
-
-    _ready: function (element) {
-      this._serverData = window.__blocksServerData__;
+    
+    _startHistory: function () {
       this._history = new History(this.options);
       this._history
           .on('urlChange', blocks.bind(this._urlChange, this))
           .start();
+    },
+
+    _ready: function (element) {
+      this._serverData = window.__blocksServerData__;
+      this._startHistory();
       blocks.query(this, element);
       this._viewsReady(this._views);
     },