nytimes / backbone.stickit

Backbone data binding, model binding plugin. The real logic-less templates.
MIT License
1.64k stars 176 forks source link

Select options do not rerender on collection changes #265

Open yamsellem opened 9 years ago

yamsellem commented 9 years ago

Using a backbone collection to fill the options of a select box do not subscribe the bow to the collection changes. So, on collection:change, simulating a change on the observed attribute is the only way to force the select options to refresh.

In the following code, removing the 2 lines after the magic comment reproduce this issue.

var dates = new Collection([
  {
    value: '05/12/14', 
    label: '5 of december',
    places: ['Paris', 'London']
  },
  {
    value: '06/12/14', 
    label: '6 of december',
    places: ['Prague', 'Venice']
  }
  ]);

  var places = new Collection();
  places.reset(dates.first().get('places').map(function(name) {
    return {value: name, label: name};
  }));

Backbone.View.extend({
  bindings: {
    'select.js-date': {
      observe: 'date',
      selectOptions: { collection: dates },
      onSet: function(val) {
        places.reset(dates.findWhere({value: val}).get('places').map(function(name) {
            return {value: name, label: name};
        }));

        // magic: force value display
        this.model.set('place', '#nope');
        this.model.set('place', places.first().get('value'));
      }
    },
    'select.js-place': {
      observe: 'place',
      selectOptions: { collection: places }
    }
  }
});
yousefcisco commented 9 years ago

I've just tried to reproduce the issue here: http://jsbin.com/mokegi/2/

I can't see the problem, with or without the two lines of code underneath the magic comment. What version of stickit are you using? Selects should re-render on add, remove, reset or sort in the latest version of stickit (see: https://github.com/NYTimes/backbone.stickit/commit/8d842866ba13bd6277e6cde14c29c4166fee5d41)

yamsellem commented 9 years ago

I've update your sample with another url for stickit dependency, it wasn't working (find it here) — the version used is the latest, 0.8.

The sample reproduces the issue: without the 'magic' comment, changing the first select do not rerender the second select (which still displays 'Paris' and 'London' instead of 'Prague' and 'Venice' ).

It means that reseting a collection attached to select options is not triggering a render as I expect it too.

The 'magic' forces the rerender by changing the model attribute attached to the select.

Thanks for your help. ps. maybe it's fixed in master, but I cannot find a proper dependency on a cdn right now (which is not surprising ;-)

akre54 commented 9 years ago

Hey yall, we've got a failing test in the select options. Can one of you guys look into it?

edit: fixed in #269