Make List events cancellable

README.md

@@ -231,14 +231,6 @@ Creates a sortable and editable list of items, which can be any of the above sch
 - Optional. Message to display to the user before deleting an item.
 
 
-**Events**
-
-The following events are fired when the user actions an item. Each event callback receives the relevant item value as an object:
-- `addItem`
-- `editItem`
-- `removeItem` 
-
-
 Examples:
 
     var schema = {
@@ -249,6 +241,25 @@ Examples:
     };
 
 
+**Events**
+
+The following events are fired when the user actions an item:
+- `addItem`
+- `editItem`
+- `removeItem` 
+
+Each event callback receives the relevant item value as an object, and a callback. To cancel the event and prevent the default action, do not run the 'next' callback:
+
+    var form = new Backbone.Form({ model: this.model }),
+        list = form.fields.list.editor;
+
+    list.bind('removeItem', function(item, next) {
+        var msg = 'Are you sure you want to delete ' = item.name + '?';
+        
+        if (confirm(msg)) next();
+    });
+
+
 Date
 ----
 

src/backbone-forms.js

@@ -83,9 +83,7 @@
             context = eventHandlers[0][1] || this;
 
         //Add the callback that will be used when done
-        arguments.push(function(runCallback) {
-            if (runCallback !== false) callback();
-        });
+        arguments.push(callback);
 
         fn.apply(context, arguments);
     }

src/jquery-ui-editors.js

@@ -267,31 +267,31 @@
             var self = this;
 
             this.openEditor(null, function(value) {
-                var text = self.itemToString(value);
-
-                //Create DOM element
-                var li = $(self.itemTemplate({
-                    id: value.id || '',
-                    text: text
-                }));
-
-                //Store data
-                $.data(li[0], 'data', value);
-
-                $('ul', self.el).append(li);
-
-                //jQuery UI buttonize
-                $('button.bbf-list-edit', this.el).button({
-                    text: false,
-                    icons: { primary: 'ui-icon-pencil' }
-                });
-                $('button.bbf-list-del', this.el).button({
-                    text: false,
-                    icons: { primary: 'ui-icon-trash' }
+                //Fire 'addItem' cancellable event
+                triggerCancellableEvent(self, 'addItem', [value], function() {
+                    var text = self.itemToString(value);
+
+                    //Create DOM element
+                    var li = $(self.itemTemplate({
+                        id: value.id || '',
+                        text: text
+                    }));
+
+                    //Store data
+                    $.data(li[0], 'data', value);
+
+                    $('ul', self.el).append(li);
+
+                    //jQuery UI buttonize
+                    $('button.bbf-list-edit', this.el).button({
+                        text: false,
+                        icons: { primary: 'ui-icon-pencil' }
+                    });
+                    $('button.bbf-list-del', this.el).button({
+                        text: false,
+                        icons: { primary: 'ui-icon-trash' }
+                    });
                 });
-
-                //Fire 'add' event
-                self.trigger('addItem', value);
             });
         },
 
@@ -306,14 +306,14 @@
                 originalValue = $.data(li[0], 'data');
 
             this.openEditor(originalValue, function(newValue) {
-                //Update display
-                $('.bbf-list-text', li).html(self.itemToString(newValue));
+                //Fire 'editItem' cancellable event
+                triggerCancellableEvent(self, 'editItem', [newValue], function() {
+                    //Update display
+                    $('.bbf-list-text', li).html(self.itemToString(newValue));
 
-                //Store data
-                $.data(li[0], 'data', newValue);
-
-                //Fire 'edit' event
-                self.trigger('editItem', newValue);
+                    //Store data
+                    $.data(li[0], 'data', newValue);
+                });
             });
         },
 
@@ -328,7 +328,7 @@
                 confirmMsg = this.schema.confirmDeleteMsg || 'Are you sure?';
 
             function remove() {
-                triggerCancellableEvent(self, 'removeItem', [data], function(err) {
+                triggerCancellableEvent(self, 'removeItem', [data], function() {
                     li.remove();
                 });
             }

test/helpers.js

@@ -9,6 +9,14 @@ test('Transforms camelCased string to words', function() {
 
 
 
+module('createTemplate');
+
+test('todo', function() {
+    console.log('TODO')
+});
+
+
+
 module('createEditor');
 
 (function() {
@@ -43,3 +51,52 @@ module('createEditor');
     });
 
 })();
+
+
+
+module('triggerCancellableEvent');
+
+(function() {
+
+    var trigger = Form.helpers.triggerCancellableEvent;
+
+    test('Passes through arguments', function() {
+        expect(2);
+
+        var view = new Backbone.View();
+
+        view.bind('add', function(arg1, arg2, next) {
+            equal(arg1, 'foo');
+            equal(arg2, 'bar');
+        });
+
+        trigger(view, 'add', ['foo', 'bar']);
+    });
+
+    test('Default action runs if next is called', function() {
+        expect(1);
+
+        var view = new Backbone.View();
+
+        view.bind('remove', function(next) {
+            next();
+        });
+
+        trigger(view, 'remove', [], function() {
+            ok(true);
+        });
+    });
+
+    test('Default action doesnt run if next is not called', function() {
+        var view = new Backbone.View();
+
+        view.bind('edit', function(next) {
+            //Don't continue
+        });
+
+        trigger(view, 'edit', [], function() {
+            ok(false); //Shouldn't run
+        });
+    });
+
+})();