Fixing model sync, much weird code cleaned up

src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js

@@ -3,82 +3,82 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
         
         var vm = this;
         
-        vm.selectedItems = [];
         vm.configItems = [];
+        vm.viewItems = [];
         vm.changed = changed;
         
         function init() {
             
-            //we can't really do anything if the config isn't an object
+            // currently the property editor will onyl work if our input is an object.
             if (angular.isObject($scope.model.config.items)) {
 
-                //now we need to format the items in the dictionary because we always want to have an array
-                var configItems = [];
+                // formatting the items in the dictionary into an array
+                var sortedItems = [];
                 var vals = _.values($scope.model.config.items);
                 var keys = _.keys($scope.model.config.items);
                 for (var i = 0; i < vals.length; i++) {
-                    configItems.push({ id: keys[i], sortOrder: vals[i].sortOrder, value: vals[i].value });
+                    sortedItems.push({ key: keys[i], sortOrder: vals[i].sortOrder, value: vals[i].value});
                 }
 
                 //ensure the items are sorted by the provided sort order
-                configItems.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
-
-                vm.configItems = configItems;
+                sortedItems.sort(function (a, b) { return (a.sortOrder > b.sortOrder) ? 1 : ((b.sortOrder > a.sortOrder) ? -1 : 0); });
+                
+                vm.configItems = sortedItems;
                 
                 if ($scope.model.value === null || $scope.model.value === undefined) {
                     $scope.model.value = [];
                 }
                 
-                updateViewModel(configItems);
-
+                // update view model.
+                generateViewModel($scope.model.value);
+                
                 //watch the model.value in case it changes so that we can keep our view model in sync
-                $scope.$watchCollection("model.value",
-                    function (newVal) {
-                        updateViewModel(configItems);
-                    }
-                );
+                $scope.$watchCollection("model.value", updateViewModel);
             }
             
         }
-
-        function updateViewModel(configItems) {
+        
+        function updateViewModel(newVal) {
             
-            //get the checked vals from the view model
-            var selectedVals = _.map(
-                _.filter($scope.selectedItems,
-                    function(f) {
-                        return f.checked;
-                    }
-                ),
-                function(m) {
-                    return m.value;
+            var i = vm.configItems.length;
+            while(i--) {
+                
+                var item = vm.configItems[i];
+                
+                // are this item the same in the model
+                if (item.checked !== (newVal.indexOf(item.value) !== -1)) {
+                    
+                    // if not lets update the full model.
+                    generateViewModel(newVal);
+                    
+                    return;
                 }
-            );
-            
-            //if the length is zero, then we are in sync, just exit.
-            if (_.difference($scope.model.value, selectedVals).length === 0) {
-                return;
             }
-
-            $scope.selectedItems = [];
+            
+        }
+            
+        function generateViewModel(newVal) {
+            
+            vm.viewItems = [];
             
             var iConfigItem;
-            for (var i = 0; i < configItems.length; i++) {
-                iConfigItem = configItems[i];
-                var isChecked = _.contains($scope.model.value, iConfigItem.value);
-                $scope.selectedItems.push({
+            for (var i = 0; i < vm.configItems.length; i++) {
+                iConfigItem = vm.configItems[i];
+                var isChecked = _.contains(newVal, iConfigItem.value);
+                vm.viewItems.push({
                     checked: isChecked,
-                    key: iConfigItem.id,
-                    val: iConfigItem.value
+                    key: iConfigItem.key,
+                    value: iConfigItem.value
                 });
             }
+            
         }
 
         function changed(model, value) {
             
             var index = $scope.model.value.indexOf(value);
             
-            if (model) {
+            if (model === true) {
                 //if it doesn't exist in the model, then add it
                 if (index < 0) {
                     $scope.model.value.push(value);
@@ -89,6 +89,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
                     $scope.model.value.splice(index, 1);
                 }
             }
+            
         }
 
         init();

src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html

@@ -1,6 +1,6 @@
 <div class="umb-property-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController as vm">
     <ul class="unstyled">
-        <li ng-repeat="item in vm.configItems track by item.id">
+        <li ng-repeat="item in vm.viewItems track by item.key">
             <umb-checkbox name="{{::model.alias}}" value="{{::item.value}}" model="item.checked" text="{{::item.value}}" on-change="vm.changed(model, value)" required="vm.model.validation.mandatory && !vm.model.value.length"></umb-checkbox>
         </li>
     </ul>