One way binding

[samselikoff]

We're having some trouble when binding value to a query param, with null/undefined. Is there any way to disable two-way binding? Ideally the change would only send out an action, rather than updating the value that was passed in.

[samselikoff]

Either, really just want the select box to update if the value passed into it updates, but when user changes select box, just want it to send out an action (and not update either value or selection)

[miguelcobain]

That sounds exactly like the definition of "data down, actions up".
Didn't think of that particular use case.

We may need to do some slight changes to make this conform this paradigm.
Perhaps only change value/selection if an action isn't set?

[samselikoff]

right. Maybe an opt-in to disable the two-way binding so it's backwards compatible.

[miguelcobain]

https://github.com/miguelcobain/ember-cli-selectize/blob/master/addon%2Fcomponents%2Fember-selectize.js#L256

I'd say that, in the _updateSelection function, we would either trigger an action or update the value, but not both?
I'm not seeing any scenario where you need both, but if there is one, you can update the selection in the action.

[samselikoff]

yah, again you can leave both on by default if you dont want to break bwds compatibility, but if twoWay=false don't run line 257

[samselikoff]

it's going to be a bit more than that line. I commented it out locally, but there's still some wackiness going on

[miguelcobain]

Is your select multiple or single?

[samselikoff]

single. I think it has to do with _valueDidChange, but commenting out that method breaks the "data down" part (select doesn't represent value passed in)

[miguelcobain]

There are a couple of set('selection',...). Any of those may be the culprit.

[samselikoff]

right. So it looks like I actually got what I want with this:

// components/ember-selectize.js
import Component from 'ember-cli-selectize/components/ember-selectize';

Component.reopen({
  _updateSelection: function(selection) {
    // allow the observers and computed properties to run first
    Ember.run.schedule('actions', this, function() {
      var value = this.get('value');
      this.sendAction('select-item', selection, value);
    });
  },
  _valueDidChange: Ember.observer('value', function() {
  }),
});

export default Component;

This lets me pass in selection, but ember-selectize itself doesn't call .set, it just sends out the action.

This didn't work when I just passed in value though. But that's okay for now.

[miguelcobain]

Glad you made it work for now.

I'll restructure the code a bit better so that we have a single point of updates.
That way we can have a better control.

Meanwhile, let's keep this open.
Thanks.

[knownasilya]

Would love a twoWay=false option.

[miguelcobain]

I would prefer to infer that by checking if actions are bound or not.
Basically, if select-item action is used, don't update selection or value.

This would of course break if people are using both actions and two-way bindings. But I kind of think of that as an anti-pattern.

Thoughts?

[knownasilya]

Agreed. I'm assuming this would work for add-item and remove-item as well.

[miguelcobain]

From all the actions, maybe only if any ofselect-item, add-item or remove-item is set, we don't update selection or value.

create-item and update-filter shouldn't trigger this behavior because people who wish to use two-way bindings may need them.

[samselikoff]

@knownasilya I've also started wrapping selectize (and other libs) in my own component code and using variables local to that wrapper for the two-way binding, but only sending actions out. This is a short-term way to enforce one-way binding in your app. (Also, I think wrapping 3rd-party components in your application is generally a good pattern).

[knownasilya]

@samselikoff feel like sharing your wrapper? I always get bit by when the final value needs to be an array of keys, but the input is an array of objects. Getting the saved items to show up by default is a big pain.

[knownasilya]

@miguelcobain were you able to make those changes for the actions?

[samselikoff]

I'm not sure what you mean by final value.

I usually just have something like {{ted-select content=content selection=selection}} and so on, and internally to the component I'd have

export default Ember.Component.extend({
  _selection: Ember.computed.oneWay('selection');

  emitActions: Ember.observer('_selection', function() {
    if (this.get('_selection') !== this.get('selection') {
      this.sendAction('on-select', this.get('_selection');
    }
  }
});

and then the component's template would be something like

{{view 'select' content=content selection=_selection ...}}

so then you can

{{ted-select content=content
  selection=selection
  on-select='handleSelect'}}

[knownasilya]

So input is [{ id: 1, value: 'test' }] and output is [1], which would be the final output, since ember-selectize doesn't support value and selection needs to be transformed.

[samselikoff]

output meaning, the parameter of the on-select action?

[knownasilya]

See https://gist.github.com/knownasilya/f200d462e6c3443f41ac, trying to get the selection to turn into and object, but having a hard time. It works on initial load if selection is an array of ids (internally it's replaced with object versions), but on-select it reverts back to the id version. I've tried a few things but keep running into stack overflows.. I can't wait for immutable by default.

[samselikoff]

did you try _selection: Ember.computed.oneWay('selection');? If you do that selectize should never mutate the thing you pass in

[knownasilya]

Is there a way to do oneWay with a full-blown computed property? Since I need to transform the users data from array of values, to an array of objects.

[samselikoff]

I dont think so, can't you just make sure your CP is only composed of other readonly properties?

[Fenntasy]

From all the actions, maybe only if any of select-item, add-item or remove-item is set, we don't update selection or value.

@miguelcobain is it true in the current version?

[knownasilya]

Most people are using ember-power-select now a days.

[Fenntasy]

@knownasilya thanks for the tip