bugfix for #14 including refactoring of the create/delete event liste…

…ning and fireing

Changelog.md

@@ -5,7 +5,7 @@ Changelog
 ------------
 - Allow an object to be passed to `$navigate` service as first argument to leverage the full power
   of jqm `changePage` function.
-
+- ng:switch now works correctly.
 
 
 1.0.4

src/main/webapp/jqm-angular.js

@@ -12,6 +12,7 @@ define([
     'jqmng/sharedController',
     'jqmng/widgets/pageCompile',
     'jqmng/widgets/angularRepeat',
+    'jqmng/widgets/angularSwitch',
     'jqmng/widgets/angularInput',
     'jqmng/widgets/angularSelect',
     'jqmng/widgets/disabledHandling',

src/main/webapp/jqmng/widgets/angularRepeat.js

@@ -3,13 +3,11 @@ define(['jqmng/widgets/widgetProxyUtil'], function(proxyUtil) {
      * Modify original ng:repeat so that all created items directly have a parent
      * (old style repeat). This is slower, however simplifies the integration with jquery mobile a lot!
      * <p>
-     * This will furthermore create the events "elementsAdded" and "elementsRemoved" if
-     * elements were added or deleted (only once per eval).
-     * <p>
      * This also takes care for jquery widgets wrapping themselves into other elements
      * (e.g. setting a div as new parent).
      */
     angular.widget('@ng:repeat', function(expression, element) {
+        element.attr('ngm:createwidgets', 'true');
         element.removeAttr('ng:repeat');
         element.replaceWith(angular.element('<!-- ng:repeat: ' + expression + ' -->'));
         var linker = this.compile(element);
@@ -39,8 +37,6 @@ define(['jqmng/widgets/widgetProxyUtil'], function(proxyUtil) {
                     collectionLength = angular.Array.size(collection, true),
                     childScope,
                     key;
-                var addedElements = [];
-                var removedElements = [];
 
                 for (key in collection) {
                     if (collection.hasOwnProperty(key)) {
@@ -78,7 +74,6 @@ define(['jqmng/widgets/widgetProxyUtil'], function(proxyUtil) {
                                 appendPosition.after(clone);
                                 lastIterElement = clone;
                             });
-                            addedElements.push(lastIterElement);
                         }
                         index ++;
                     }
@@ -89,15 +84,9 @@ define(['jqmng/widgets/widgetProxyUtil'], function(proxyUtil) {
                     // Sencha Integration: Destroy widgets
                     var child = children.pop();
                     var childElement = child.$element;
-                    removedElements.push(childElement);
                     childElement.remove();
                 }
 
-                if (addedElements.length>0) {
-                    parent.trigger('elementsAdded', addedElements);
-                } else if (removedElements.length>0) {
-                    parent.trigger('elementsRemoved', removedElements);
-                }
             }, iterStartElement);
         };
     });

src/main/webapp/jqmng/widgets/angularSwitch.js

@@ -0,0 +1,12 @@
+define(['jqmng/widgets/widgetProxyUtil'], function(proxyUtil) {
+    /**
+     * Modify the original ng:switch so that it adds the ngm:createwidgets attribute to all cases that will
+     * fire the jqm create event whenever a new scope is created.
+     */
+    proxyUtil.createAngularWidgetProxy('ng:switch', function(element) {
+        element.children().attr('ngm:createwidgets', 'true');
+        return function(element, origBinder) {
+            return origBinder();
+        }
+    });
+});

src/main/webapp/jqmng/widgets/jqmListView.js

@@ -25,10 +25,22 @@ define([
     fn._create = function() {
         var self = this;
         var res = oldCreate.apply(this, arguments);
-        // refresh the list when the children change
-        this.element.bind('elementsAdded elementsRemoved', function(event) {
-            event.stopPropagation();
+        // refresh the list when the children change.
+        this.element.bind('create', function(event) {
             self.refresh();
+            // register listeners when the children are destroyed.
+            // Do this only once per child.
+            var children = self.element.children('li');
+            var child, i;
+            for (i=0; i<children.length; i++) {
+                child = children.eq(i);
+                if (!child.data('listlistener')) {
+                    child.data('listlistener', true);
+                    child.bind("remove", function() {
+                        self.refresh();
+                    });
+                }
+            }
         });
     };
 });

src/main/webapp/jqmng/widgets/jqmSelectMenu.js

@@ -1,7 +1,6 @@
 define(['jquery'], function($) {
 
-    // selectmenu may create:
-    // - parent element
+    // selectmenu may create parent element and extra pages
     var fn = $.mobile.selectmenu.prototype;
     var oldDestroy = fn.destroy;
     fn.destroy = function() {

src/main/webapp/jqmng/widgets/jqmSlider.js

@@ -1,5 +1,5 @@
 define(['jquery'], function($) {
-    // Button wraps the actual button into another div that is stored in the
+    // Slider wraps the actual input into another div that is stored in the
     // "slider" property.
     var fn = $.mobile.slider.prototype;
     var oldDestroy = fn.destroy;

src/main/webapp/jqmng/widgets/pageCompile.js

@@ -47,8 +47,6 @@ define(['jquery', 'angular', 'jqmng/globalScope'], function($, angular, globalSc
         degradeInputs(page);
         angular.compile(page)(childScope);
         parentScope.$eval();
-        // The second pagecreate does only initialize
-        // the widgets that we did not already create by angular.
         page.trigger("pagecreate");
     });
 
@@ -78,10 +76,14 @@ define(['jquery', 'angular', 'jqmng/globalScope'], function($, angular, globalSc
     });
 
     /**
-     * Create jquery elements when elements were added to the dom.
+     * When scopes are created by angular, the elements within the scope need to be enhanced by jquery mobile.
+     * We do this by using a special directive that triggers the corresponding event.
+     * In a later release of angular there will be angular events that we can hook to.
      */
-    $(document).bind('elementsAdded', function(event) {
-        $(event.target).trigger('create');
+    angular.directive("ngm:createwidgets", function(expression) {
+        return function(element) {
+            element.parent().trigger('create');
+        };
     });
 
     var currScope = null;

src/test/webapp/devSnippetPage.html

@@ -23,7 +23,15 @@
 
 <div data-role="page" id="start">
     <div data-role="content">
-        <a href="" ngm:click="$navigate({target: 'page2', transition:'pop'})">Test</a>
+        <input type="submit" ng:click="flag = true">
+        <a href="" ngm:click="list = [1,2]" data-role="button">Fill</a>
+        <a href="" ngm:click="list = []" data-role="button">Clear</a>
+        <ul data-role="listview" data-inset="true">
+            <li ng:repeat="l in list">
+                Test
+                <button>Test</button>
+            </li>
+        </ul>
     </div>
 </div>
 

src/test/webapp/ui/selectmenuSpec.js

@@ -5,10 +5,9 @@ define(function() {
             var scope, dialog, dialogOpen;
             loadHtml('/jqmng/ui/test-fixture.html', function(frame) {
                 var page = frame.$('#start');
-                // Note: Be sure to use ng:repeat, as this is the most problematic case!
                 page.append(
                     '<div data-role="content">' +
-                        '<select ng:repeat="item in [1]" name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
+                        '<select name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
                         '</div>');
             });
             runs(function() {
@@ -48,10 +47,9 @@ define(function() {
         it('should save the ui value into the model when using non native menus', function() {
             loadHtml('/jqmng/ui/test-fixture.html', function(frame) {
                 var page = frame.$('#start');
-                // Note: Be sure to use ng:repeat, as this is the most problematic case!
                 page.append(
                     '<div data-role="content">' +
-                        '<select ng:repeat="item in [1]" name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
+                        '<select name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
                         '</div>');
             });
             runs(function() {
@@ -72,13 +70,12 @@ define(function() {
             });
         });
 
-        it('should save the model value into the ui', function() {
+        it('should save the model value into the ui when using non native menus', function() {
             loadHtml('/jqmng/ui/test-fixture.html', function(frame) {
                 var page = frame.$('#start');
-                // Note: Be sure to use ng:repeat, as this is the most problematic case!
                 page.append(
                     '<div data-role="content">' +
-                        '<select ng:repeat="item in [1]" name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
+                        '<select name="mysel" id="mysel" data-native-menu="false"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
                         '</div>');
             });
             runs(function() {
@@ -101,10 +98,9 @@ define(function() {
         it('should use the disabled attribute', function() {
             loadHtml('/jqmng/ui/test-fixture.html', function(frame) {
                 var page = frame.$('#start');
-                // Note: Be sure to use ng:repeat, as this is the most problematic case!
                 page.append(
                     '<div data-role="content">' +
-                        '<select ng:repeat="item in [1]" name="mysel" id="mysel" data-native-menu="false" ng:bind-attr="{disabled: \'{{disabled}}\'}"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
+                        '<select name="mysel" id="mysel" data-native-menu="false" ng:bind-attr="{disabled: \'{{disabled}}\'}"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
                         '</div>');
             });
             runs(function() {
@@ -122,24 +118,23 @@ define(function() {
             });
         });
 
-        it('should be removable when ng:repeat shrinks', function() {
+        it('should be removable', function() {
             loadHtml('/jqmng/ui/test-fixture.html', function(frame) {
                 var page = frame.$('#start');
-                // Note: Be sure to use ng:repeat, as this is the most problematic case!
                 page.append(
-                    '<div data-role="content" ng:init="mylist = [1,2]">' +
-                        '<select ng:repeat="item in mylist" name="mysel" id="mysel" data-native-menu="false" ng:bind-attr="{disabled: \'{{disabled}}\'}"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
+                    '<div data-role="content">' +
+                        '<select name="mysel" id="mysel" data-native-menu="false" ng:bind-attr="{disabled: \'{{disabled}}\'}"><option value="v1" default="true">v1</option><option value="v2">v2</option></select>' +
                         '</div>');
             });
             runs(function() {
                 var page = testframe().$("#start");
                 var scope = page.scope();
                 // ui select creates a new parent for itself
                 var content = page.find(":jqmData(role='content')");
-                expect(content.children('div').length).toEqual(2);
-                scope.mylist = [1];
-                scope.$root.$eval();
                 expect(content.children('div').length).toEqual(1);
+                // select creates a parent div. This should be removed when the select is removed.
+                content.find('select').eq(0).remove();
+                expect(content.children('div').length).toEqual(0);
             });
         });
 

src/test/webapp/unit-tests.js

@@ -18,5 +18,6 @@ define([
     'unit/radioSpec',
     'unit/selectSliderSpec',
     'unit/textInputSpec',
-    'unit/listViewSpec'
+    'unit/listViewSpec',
+    'unit/switchSpec'
 ]);

src/test/webapp/unit/buttonSpec.js

@@ -2,8 +2,7 @@ define(["unit/testUtils"], function(utils) {
 
     describe("button", function() {
         it('should allow clicks via ng:click', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
-            var d = utils.compileInPage('<button ng:repeat="item in [1]" id="mysel" ng:click="flag = true">Test</button>');
+            var d = utils.compileInPage('<button id="mysel" ng:click="flag = true">Test</button>');
             var page = d.page;
             var input = d.element;
             var scope = input.scope();
@@ -13,7 +12,7 @@ define(["unit/testUtils"], function(utils) {
         });
 
         it('should use the disabled attribute', function() {
-            var d = utils.compileInPage('<button ng:repeat="item in [1]" id="mysel" ng:click="flag = true" ng:bind-attr="{disabled: \'{{disabled}}\'}">Test</button>');
+            var d = utils.compileInPage('<button id="mysel" ng:click="flag = true" ng:bind-attr="{disabled: \'{{disabled}}\'}">Test</button>');
             var page = d.page;
             var input = d.element;
             var scope = input.scope();
@@ -26,15 +25,14 @@ define(["unit/testUtils"], function(utils) {
             expect(parentDiv.hasClass('ui-disabled')).toBeTruthy();
         });
 
-        it('should be removable when ng:repeat shrinks', function() {
-            var d = utils.compileInPage('<div ng:init="mylist=[1,2]"><button ng:repeat="item in mylist" id="mysel" ng:click="flag = true">Test</button></div>');
+        it('should be removable', function() {
+            var d = utils.compileInPage('<div><button>1</button><button>2</button></div>');
             var page = d.page;
-            // ui select creates a new parent for itself
             var container = d.element;
             var scope = container.scope();
             expect(container.children('div').length).toEqual(2);
-            scope.mylist = [1];
-            scope.$eval();
+            // removal of the button should also remove the parent div
+            container.find('button').eq(0).remove();
             expect(container.children('div').length).toEqual(1);
         });
     });

src/test/webapp/unit/checkBoxSpec.js

@@ -2,8 +2,7 @@ define(["unit/testUtils"], function(utils) {
 
     describe("checkbox", function() {
         it('should save the ui value into the model', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
-            var d = utils.compileInPage('<div ng:repeat="item in [1]">' +
+            var d = utils.compileInPage('<div>' +
                 '<input name="mysel" id="mysel" type="checkbox">{{mysel}}<label for="mysel" id="mylab">Entry</label>' +
                 '</div>');
             var page = d.page;
@@ -19,9 +18,8 @@ define(["unit/testUtils"], function(utils) {
         });
 
         it('should save the model value into the ui', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
             var d = utils.compileInPage(
-                '<div ng:repeat="item in [1]">' +
+                '<div>' +
                     '<input name="mysel" id="mysel" type="checkbox"><label for="mysel" id="mylab">Entry</label>' +
                     '</div>');
             var page = d.page;
@@ -39,9 +37,8 @@ define(["unit/testUtils"], function(utils) {
         });
 
         it('should use the disabled attribute', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
             var d = utils.compileInPage(
-                '<div ng:repeat="item in [1]">' +
+                '<div>' +
                     '<input name="mysel" id="mysel" type="checkbox" value="false" ng:bind-attr="{disabled: \'{{disabled}}\'}"><label for="mysel" id="mylab">Entry</label>' +
                     '</div>');
             var page = d.page;
@@ -55,19 +52,6 @@ define(["unit/testUtils"], function(utils) {
             scope.$eval();
             expect(parentDiv.hasClass('ui-disabled')).toBeTruthy();
         });
-
-        it('should enhance checkboxes when ng:repeat is used (not only during page compile)', function() {
-            var d = utils.compileInPage(
-                '<div><div ng:repeat="item in items" id="mydiv">' +
-                    '<input name="mysel" id="mysel{{$index}}" type="checkbox" value="false"><label for="mysel{{$index}}" id="mylab{{$index}}">Entry</label>' +
-                    '</div></div>');
-            var page = d.page;
-            var parentDiv = d.element;
-            expect(parentDiv.find('.ui-checkbox').length).toBe(0);
-            page.scope().$set('items', [1,2]);
-            page.scope().$eval();
-            expect(parentDiv.find('.ui-checkbox').length).toBe(2);
-        });
     });
 
 });

src/test/webapp/unit/collapsibleSpec.js

@@ -3,8 +3,7 @@ define(["unit/testUtils"], function(utils) {
     describe("collapsible", function() {
 
         it('should collapse the content by a click', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
-            var d = utils.compileInPage('<div id="el" data-role="collapsible" ng:repeat="item in [1]">' +
+            var d = utils.compileInPage('<div id="el" data-role="collapsible">' +
                 '<h3>header</h3>' +
                 '<p>content</p>' +
                 '</div>');
@@ -15,23 +14,6 @@ define(["unit/testUtils"], function(utils) {
             header.trigger('click');
             expect(content.hasClass('ui-collapsible-content-collapsed')).toBeFalsy();
         });
-
-        it('should be removable when ng:repeat shrinks', function() {
-            // Note: Be sure to use ng:repeat, as this is the most problematic case!
-            var d = utils.compileInPage('<div ng:init="mylist = [1,2]">' +
-                '<div id="el" data-role="collapsible" ng:repeat="item in mylist">' +
-                '<h3>header</h3>' +
-                '<p>content</p>' +
-                '</div>' +
-                '</div>');
-            var container = d.element;
-            var scope = container.scope();
-            expect(container.children('div').length).toEqual(2);
-            scope.mylist = [1];
-            scope.$eval();
-            expect(container.children('div').length).toEqual(1);
-        });
-
     });
 
 });