Comments (28)
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.
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
so then you can
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.
Related Issues (20)
- hideSelected and multiple don't work together HOT 1
- v0.5.8 broke the selectize styles HOT 4
- selectize.js:2151 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
- multiple mode bug? HOT 2
- Selectize changing my model property to null
- Best Practice for adding/removing on a REST/API error
- add 'readOnly' to 'generalOptions ' HOT 2
- Move selectize and sifter from Bower to NPM HOT 3
- select-item action should not fire when selection promise resolves. HOT 1
- Using multiple=true with ember-changeset-validations HOT 3
- Add Support for data-dash-attributes
- Can't install due to missing dependency HOT 1
- Label truncates when second word contains letters in the first in multiple mode HOT 1
- Tooltip for list
- 2 selectors in the same template and options visible for both of them at the same time HOT 1
- Fix breaking changes in FastBoot 1.0 HOT 1
- Migration to power select HOT 1
- DEPRECATION HOT 1
- Deprecated calls to sendAction
- ember-cli-selectize triggers a Maximum Call Stack exceeded errors
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-selectize.