One way binding about ember-cli-selectize HOT 28 OPEN

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)

from ember-cli-selectize.

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?

from ember-cli-selectize.

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

from ember-cli-selectize.

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.

from ember-cli-selectize.

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

from ember-cli-selectize.

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

from ember-cli-selectize.

Is your select multiple or single?

from ember-cli-selectize.

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)

from ember-cli-selectize.

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

from ember-cli-selectize.

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.

from ember-cli-selectize.

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.

from ember-cli-selectize.

Would love a twoWay=false option.

from ember-cli-selectize.

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?

from ember-cli-selectize.

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

from ember-cli-selectize.

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.

from ember-cli-selectize.

@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).

from ember-cli-selectize.

@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.

from ember-cli-selectize.

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

from ember-cli-selectize.

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'}}

from ember-cli-selectize.

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.

from ember-cli-selectize.

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

from ember-cli-selectize.

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.

from ember-cli-selectize.

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

from ember-cli-selectize.

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.

from ember-cli-selectize.

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

from ember-cli-selectize.

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?

from ember-cli-selectize.

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

from ember-cli-selectize.

@knownasilya thanks for the tip

from ember-cli-selectize.