sync models

src/Umbraco.Web.UI.Client/src/common/services/blockeditor.service.js

@@ -11,11 +11,10 @@
             
             for (var t = 0; t < variant.tabs.length; t++) {
                 var tab = variant.tabs[t];
-                
+
                 for (var p = 0; p < tab.properties.length; p++) {
                     var prop = tab.properties[p];
                     if (contentModel[prop.alias]) {
-                        console.log("mapping:", prop.alias, contentModel[prop.alias])
                         prop.value = contentModel[prop.alias];
                     }
                 }
@@ -89,7 +88,6 @@
 
                 scaffoldAliases.forEach((elementTypeAlias => {
                     tasks.push(contentResource.getScaffold(-20, elementTypeAlias).then(scaffold => {
-                        console.log(scaffold);
                         this.scaffolds.push(scaffold);
                     }));
                 }));

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js

@@ -18,8 +18,6 @@
         var unsubscribe = [];
         var vm = this;
 
-        console.log("BlockListBlockController", vm);
-
         vm.$onInit = function() {
 
             // Start watching each property value.
@@ -30,7 +28,9 @@
 
                 for (var p = 0; p < tab.properties.length; p++) {
                     var prop = tab.properties[p];
-                    unsubscribe.push($scope.$watch("vm.block.content.variants[0].tabs["+t+"].properties["+p+"].value", createPropWatcher(prop)));
+
+                    // Sadly we need to deep watch, cause its our only way to make sure that complex values gets synced. Alternative solution would be to sync on a broadcasted event, fired on Save and Copy eventually more.
+                    unsubscribe.push($scope.$watch("vm.block.content.variants[0].tabs["+t+"].properties["+p+"].value", createPropWatcher(prop), true));
                 }
             }
         }
@@ -40,9 +40,10 @@
             return function() {
 
                 // sync data:
-                console.log(prop.alias, prop.value);
                 vm.block.contentModel[prop.alias] = prop.value;
 
+                vm.blockEditorApi.sync();
+
                 // update label:
                 updateLabel();
             }
@@ -52,6 +53,20 @@
         function updateLabel() {
             vm.block.label = blockEditorService.getBlockLabel(vm.block);
         }
+
+        /**
+         * Listening for properties
+         */
+        /*
+        function onBlockEditorValueUpdated($event) {
+            // Lets sync the value of the property that the event comes from, if we know that..
+
+            //$event.stopPropagation();
+            //$event.preventDefault();
+        };
+
+        unsubscribe.push($scope.$on("blockEditorValueUpdated", onBlockEditorValueUpdated));
+        */
        
         $scope.$on("$destroy", function () {
             for (const subscription of unsubscribe) {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js

@@ -100,6 +100,7 @@
          * Maps content from runtime editing model (blocks) to the property model.
          * Does not take care of ordering, we need the sort-UI to sync that, on the fly.
          */
+        /*
         function mapToContent() {
 
             // sync data from blocks to content models.
@@ -107,10 +108,15 @@
                 modelObject.setDataFromEditingModel(block);
             });
         }
+        */
 
+        /*
         function sync() {
-            mapToContent();
+            // to avoid deep watches of block editors we use an event for those instead?
+            // Lets inform container of this property editor that we updated.
+            $scope.$emit("blockEditorValueUpdated");
         }
+        */
 
         function syncBlockData(block) {
             modelObject.setDataFromEditingModel(block);
@@ -325,7 +331,7 @@
 
 
         unsubscribe.push($scope.$watch(() => vm.blocks.length, validateLimits));
-
+/*
         unsubscribe.push($scope.$on("formSubmitting", function (ev, args) {
 
             console.log("formSubmitting is happening, we need to make sure sub property editors are synced first.")
@@ -334,7 +340,7 @@
 
             //sync();
         }));
-
+*/
         $scope.$on("$destroy", function () {
             for (const subscription of unsubscribe) {
                 subscription();