Updating select from collection automatically

backbone.stickit.js

@@ -556,12 +556,12 @@
           // Determine if this option is selected.
           var isSelected = function() {
             if (!isMultiple && optionVal != null && fieldVal != null && optionVal === fieldVal) {
-              return true
+              return true;
             } else if (_.isObject(fieldVal) && _.isEqual(optionVal, fieldVal)) {
               return true;
             }
             return false;
-          }
+          };
 
           if (isSelected()) {
             option.prop('selected', true);
@@ -593,7 +593,38 @@
       }
 
       // Support Backbone.Collection and deserialize.
-      if (optList instanceof Backbone.Collection) optList = optList.toJSON();
+      if (optList instanceof Backbone.Collection) {
+        var collection = optList;
+        var refreshSelectOptions = function() {
+          var currentVal = getAttr(model, options.observe, options);
+          applyViewFn.call(this, options.update, $el, currentVal, model, options);
+        };
+        // We need to call this function after unstickit and after an update so we don't end up
+        // with multiple listeners doing the same thing
+        var removeCollectionListeners = function() {
+          collection.off('add remove reset sort', refreshSelectOptions);
+        };
+        var removeAllListeners = function() {
+          removeCollectionListeners();
+          collection.off('stickit:selectRefresh');
+          model.off('stickit:selectRefresh');
+        };
+        // Remove previously set event listeners by triggering a custom event
+        collection.trigger('stickit:selectRefresh');
+        collection.once('stickit:selectRefresh', removeCollectionListeners, this);
+
+        // Listen to the collection and trigger an update of the select options
+        collection.on('add remove reset sort', refreshSelectOptions, this);
+
+        // Remove the previous model event listener
+        model.trigger('stickit:selectRefresh');
+        model.once('stickit:selectRefresh', function() {
+          model.off('stickit:unstuck', removeAllListeners);
+        });
+        // Remove collection event listeners once this binding is unstuck
+        model.once('stickit:unstuck', removeAllListeners, this);
+        optList = optList.toJSON();
+      }
 
       if (selectConfig.defaultOption) {
         addSelectOptions(["__default__"], $el);

test/bindData.js

@@ -733,6 +733,75 @@ test('bindings:selectOptions:defaultOption:OptGroups', 8, function() {
     equal(model.get('water'), 'dasina');
   });
 
+  test('bindings:selectOptions (Backbone.Collection that changes)', function() {
+
+    var collection = new Backbone.Collection([{id:1,name:'fountain'}, {id:2,name:'evian'}, {id:3,name:'dasina'}]);
+    model.set({'water':'fountain'});
+    view.model = model;
+    view.templateId = 'jst8';
+    view.bindings = {
+      '#test8': {
+        observe: 'water',
+        selectOptions: {
+          collection: function() { return collection; },
+          labelPath: 'name',
+          valuePath: 'name'
+        }
+      }
+    };
+
+    $('#qunit-fixture').html(view.render().el);
+
+    equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'fountain');
+
+    model.set('water', 'evian');
+    equal(getSelectedOption(view.$('#test8')).data('stickit_bind_val'), 'evian');
+
+    view.$('#test8 option').eq(2).prop('selected', true).trigger('change');
+    equal(model.get('water'), 'dasina');
+
+    // Test that the select options are auto-updated
+    collection.add({id:4,name:'buxton'});
+    equal(view.$('#test8 option').eq(3).data('stickit_bind_val'), 'buxton');
+
+    var modelEvents = ['stickit:unstuck', 'stickit:selectRefresh'];
+    var collectionEvents = ['stickit:selectRefresh', 'add', 'remove', 'reset', 'sort'];
+
+    // Test the number of event listeners set against the model and collection
+    equal(_.filter(model._events, function(event, key) {
+      return (event.length === 1 && _.contains(modelEvents, key));
+    }).length, modelEvents.length);
+
+    equal(_.filter(collection._events, function(event, key) {
+      return (event.length === 1 && _.contains(collectionEvents, key));
+    }).length, collectionEvents.length);
+
+    collection.remove(2);
+    equal(view.$('#test8 option').length, collection.length);
+
+    collection.reset();
+    equal(view.$('#test8 option').length, collection.length);
+
+    // Test the number of event listeners set against the model and collection after changes to the collection
+    equal(_.filter(model._events, function(event, key) {
+      return (event.length === 1 && _.contains(modelEvents, key));
+    }).length, modelEvents.length);
+
+    equal(_.filter(collection._events, function(event, key) {
+      return (event.length === 1 && _.contains(collectionEvents, key));
+    }).length, collectionEvents.length);
+
+    view.unstickit();
+
+    // Test that the select options are no longer updated
+    collection.add([{id:1,name:'fountain'}, {id:2,name:'evian'}, {id:3,name:'dasina'}]);
+    notEqual(view.$('#test8 option').length, collection.length);
+
+    // Test that all event listeners have been removed after unstickit
+    ok(_.isEmpty(model._events));
+    ok(_.isEmpty(collection._events));
+  });
+
   test('bindings:selectOptions (collection path relative to `this`)', function() {
 
     view.collection = new Backbone.Collection([{id:1,name:'fountain'}, {id:2,name:'evian'}, {id:3,name:'dasina'}]);