miguelcobain / ember-cli-selectize Goto Github PK
View Code? Open in Web Editor NEWAn Ember and Selectize integration, packaged as an Ember-cli addon.
License: MIT License
An Ember and Selectize integration, packaged as an Ember-cli addon.
License: MIT License
It appears once an option is set, we lose the ability to deselect it as that "null" value goes away completely. It appears this should be supported in selectize provided we include a "null" option as the first item.
Is this a bug or am I missing the proper implementation approach?
Sorry for my ignorance, but I can't seem to find a way to trigger an event when a selection has been made. Is this possible?
selection property is usually a single value, but selectize expects an object has has a value path and a label path. What is the proper way to handle this situation.
If optionTemplate
is set the component fails.
I have a DS.PromiseArray
on my controller called workoutTemplates
. The fulfilled promise delivers a DS.RecordsArray
where each record has both id
and name
properties. Hopefully this is clear, I think it should represent a fairly normal use-case for folks using ember-data. In my case, however, I can not find the right settings for optionValuePath
and optionLabelPath
.
Here is what I would have thought would work:
{{ember-selectize
content=workoutTemplates
optionValuePath="content.content.content.id"
optionLabelPath="content.content.content.name"
selection=workoutId
placeholder="Select an option"
}}
This is based on the following snapshot from the Ember Inspector (which is pointed at the selectize component):
This configuration results in no options, interestingly if I instead use the path of content.id
and content.name
I get 6 items (the right number) but each are listed as 'undefined'.
Awesome work on this so far and I hope this is a simple case of pointing in the right direction.
Please update npm registry with appropriate fixes.
After the content=controller.items get binded, if you add a new item to controller.items - it doesn't show up in the dropdown.
How can I force "refresh"?
Trying to use this component but getting this rather strange look on the UI. For some reason it is showing two inputs, a "normal" input and then the select on top of it:
Nothing strange on the component options:
{{ember-selectize
content=cilindros
optionValuePath="content.id"
optionLabelPath="content.codigo"
selection=selectedCilindro
placeholder="Select an option"
}}
It seems to be related with styling. My app is using ember 1.9, handlebars 2.0, jquery 2.1.2 and bootstrap 3.3.1.
Any ideas?
I want to search multiple field, so i add searchField property in controller:
export default Ember.Controller.extend({
searchField: ["label", "value"]
});
and template:
{{ember-selectize
selection=postId
content=postOptions
optionValuePath="content.id"
optionLabelPath="content.value"
multiple=false
searchField=searchField
}}
but not working, it still only search lable
field, how to set searchField?
Thanks.
I have the following summarized setup:
var Group = DS.Model.extends({
items: DS.hasMany("item")
});
var Item = DS.Model.extends({
group: DS.belongsTo("group")
});
var GroupController = Ember.Controller.extends({
// routed from /group/{:group_id}
choices: function () {
return this.store.find("item");
}
});
Which means that every time I change the group, all the items of the initial group are unloaded one by one, then all the items of the new group are loaded one by one, which means a lot of observers are being called. The loading time is noticeable (~ 1-2 seconds or more).
Aren't there any intelligent spots where using Ember.run.debounce
(http://emberjs.com/api/classes/Ember.run.html#method_debounce) would be a good idea to obtain a more reactive UI ?
Hey,
My use case a pretty simple, I define my options in an array of objects like so:
frequencies = [
{value: 'annualy', label: 'Annualy'},
{value: 'quaterly', label: 'Quaterly'},
{value: 'monthly', label: 'Monthly'}
]
Then I have a model that has a frequency field. Obviously, I simply want the value, not the entire object from the above frequencies array. So I create a selectize like so:
{{ember-selectize
content=frequencies // this is the above array
optionValuePath="content.value"
optionLabelPath="content.label"
selection=frequency // this is the model frequency
placeholder="Select a frequency"
}}
Selection doesn't work and when I select something, it sets frequency
to the full object {}, not the value alone. This is very counter-intuitive to me since I can't think of any use case where you'd want the entire object. Am I doing something wrong? I'd like to avoid creating virtual attributes simply to work with selectize.
Thanks!
Just noticed that the selected
property doesn't work when the passed value is a promise.
Example
//models/task.js
export default DS.Model.extend({
project: DS.BelongsTo('project', {async: true}) //returns a promise.
});
//controllers/task.js
export default Ember.Controller.extend({
projects: Ember.computed.readOnly('injected-projects'),
actions: {
projectSelected: function(project) {
var model = this.get('model');
model.set('project', project);
}
}
});
//templates/task.hbs
{{ember-select
projects=projects
selected=model.project
select-item="projectSelected"
optionLabelPath="name"
}}
This works if I change the relationship to non async.
@miguelcobain what are your thoughts on this? Is this something that should be supported?
Does this component support remote searching?
When using the stylesheets from the dist
folder in selectize, the themed ones (e.g. bootstrap3) are actually compiled less stylesheets which include the base styles. Including selectize.css
also just doubles the size of the css getting imported.
Notice how large selectize.bootstrap3.css
is, and how similar it is to selectize.css
.
https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.bootstrap3.css
Hi,
First, I try to use selectize to select element that are then added to list. But I don't want selectize to actually list the selected element (I want it to remain blank all the time). I also want the list of items to update, so only the element that haven't been selected yet are available.
So I have the following selectize:
// template
{{ember-selectize
placeholder="Search available metrics"
content=remainingItems
optionValuePath="content.id"
optionLabelPath="content.name"
selection=selectedItems
closeAfterSelect=true
}}
// controller
remainingItems: function () {
var selected = this.get('selectedItems');
return _.difference(allItems, selected);
}.property('model.items.@each')
That's the short version of the code, it works. The only problem is that when I select an item the dropdown closes and reopens right away. It closes because of the closeAfterSelect
option and reopens I don't know why. If I set the option to false, then it stays open and doesn't blink.
I was thinking of a way to trigger a blur on selectize but it really feels hacky. Do you have any suggestion? Thanks!
Several options available in Selectize are not settable on the ember-selectize
component. The one I need right now is closeAfterSelect
. Is there a technical reason for it not to be available, or would it be possible to add it ?
The first demo shows an example of a multi-select that supports adding new items. Two questions:
create=true
on the component.After upgrading Ember to ember 1.11 and running npm update on the rest of packages, the addon stopped working correctly. the content
property is set an array of 200 elements but only one option is rendered which corresponds to the first array element. I tried optionFunction, optionView and other stuff but it always renders a single item no matter what. Any thoughts?
currently we manually trigger selectionDidChange in contentArrayDidChange, however if labels don't exist, then the options will not be added prior to triggering this event (and addItems will not work because you cannot addItems prior to addOptions).
solution should be (I believe) updating _labelDidChange to the following:
_labelDidChange: function(sender) {
if (!this._selectize) { return; }
var data = {
label: get(sender, this.get('_labelPath')),
value: get(sender, this.get('_valuePath')),
data: sender
};
if(this._selectize.getOption(data.value).length !== 0) {
this._selectize.updateOption(data.value, data);
} else {
this.objectWasAdded(sender);
this._selectionDidChange();
}
},
ember install ember-cli-selectize
version: 0.2.3
Installed packages for tooling via npm.
installing
Installing browser packages via Bower...
cached git://github.com/brianreavis/selectize.js.git#0.12.0
Installed browser packages via Bower.
installing
The ember generate
command requires an entity name to be specified. For more details, use ember help
.
This commit a4da167 made maxItems default to null. Selectize defaults this to 1. I'm not sure if setting maxItems=1 for single selects or maxItems=null (or whatever number) for multiple selects makes more sense. What do you think?
In any case, something should be added to the README explaining how to use.
Hi!
When updated to new ember 1.13.0-beta.1 I got this deprecation
Ember Inspector (Deprecation Trace): A property of <iframe@view:-outlet::ember658> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.
at CoreView.default.extend.scheduleRevalidate (http://localhost:4200/assets/vendor.js:53456:24)
at http://localhost:4200/assets/vendor.js:20942:32
at Object.Stream.notifySubscribers (http://localhost:4200/assets/vendor.js:28926:11)
at Object.Stream.notifyExcept (http://localhost:4200/assets/vendor.js:28866:14)
at Object.Stream.notify (http://localhost:4200/assets/vendor.js:28860:12)
at Object.Stream.notifySubscribers (http://localhost:4200/assets/vendor.js:28928:20)
at Object.Stream.notifyExcept (http://localhost:4200/assets/vendor.js:28866:14)
at Object.Stream.notify (http://localhost:4200/assets/vendor.js:28860:12)
at Object.apply (http://localhost:4200/assets/vendor.js:29968:18)
at Object.sendEvent (http://localhost:4200/assets/vendor.js:24338:17)
I am using the selectize component with the most minimal configuration and for some reason the "placeholder" functionality is not working. I have tried setting both placeholder
and prompt
attributes but in both cases it is ignored (with no JS errors to indicate a problem).
My environment is running on OSX:
version: 0.1.3
valid watchman found, version: [3.0.0]
http_parser: 1.0
node: 0.10.33
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.29
zlib: 1.2.3
modules: 11
openssl: 1.0.1j
npm: 2.1.10
A demo page with some examples in the dummy app would be great.
Currently I have three {{ember-selectize}}
elements on the page all bound to a single property but from different collections / content. If I selected one option in the first selectize and the another option in the second, should the first be cleared? Currently not happening like that. Do I need to have them all coming from the same content?
Would be nice if the plugins
array could be specified. It'll most likely have to be done in the user's config/environment.js
.
@miguelcobain #41 is ready for merge if you could be so kind.
Right now if I want to lazy load my data, any selected items are showing up as 'undefined' until that relationship resolves. It would be nice to have the option to use an empty string instead so values elegantly appear, and when re-visiting a route rendering can appear far quicker even if options are updated in the background.
I am running into issues when the content changes during tear down of the component. It appears the _onItemRemove
function is being called thus setting the value to null. I think moving to the data down actions up methodology will fix this problem.
So before I attempt this I thought I would ask how should this work?
I feel this component should two way bind a value as well a support ddau
. I am thinking the value
property should be a two way binding and selection
a one way binding.
So one can either use the value
property or the selection
property with the select-item
action.
Is this a good approach?
Hello!
Trying to call the component such that
Where value="some value present in the optionValuePath"
Does not reflect on the component's selection and sets that value to undefined
Hi!
When passing an array of Objects to the content property (e.g. an array of ember-data models) and using content
as optionsValuePath
(e.g. as needed by ember-data when working with relationships) removing an object from the selection throws an error in selectize.
Uncaught TypeError: $item.attr is not a function
in selectize's removeItem-method
Because the observers that trigger this code are also triggered on willDestroyElement
this also fails when removing the component from the DOM.
This makes this addon basically unusable for working with ember-data relationships which is very unfortunate because ember.select is also not working for ember-data relationships ;).
I am happy to help with solving this issue but I think input from @miguelcobain would be very useful as I am not really familiar with selectize or ember-cli-selectize.
Any idea what's the problem here?
And of course thanks for this great addon!
The bower directory can be renamed to anything else (e.g. vendor
).
It's better to change hardcoded bower paths from this:
app.import('bower_components/selectize/dist/js/standalone/selectize.js');
to this:
app.import(app.bowerDirectory + '/selectize/dist/js/standalone/selectize.js');
After my issue #68 (thanks for quick solving!) i've updated to 0.3.2 and had an error:
Uncaught Error: Could not find module `ember-new-computed` imported from `ember-cli-selectize/components/ember-selectize`
I guess i can be connected to ember-cli so, i leave here its version.
I use [email protected] and [email protected]
Hi,
Are there any examples of using optionTemplate and optionView? Also looking for examples on callbacks after option gets selected.
Thanks.
I have the following ember-selectize component:
{{ember-selectize placeholder="Choose products..."
content=controllers.products.model
selection=controllers.cycle.tempProducts
optionValuePath="content.id"
optionLabelPath="content.name"
multiple=true
create-item="createNewProduct"}}
I can confirm that createNewProduct
is creating a new object and adding it to the content array, and is also being added to the selection array. However, the new item does not appear in the ember-selectize input.
Update: I should also add that the newly-created object does not appear in either the input as a selection or in the dropdown as part of the content.
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.
The controller can't be overwritten (always set to the component instance) and the actions aren't sent.
Mainly due to improper use of actions coming from a component.
Uncaught Error: Assertion Failed: The remove action was triggered on the component <app@component:ember-selectize::ember872>, but the action name (function () {
// What we should really do here is wait until the end of the run loop
// to determine if the element has been re-appended to a different
// element.
// In the interim, we will just re-render if that happens. It is more
// important than elements get garbage collected.
if (!this.removedFromDOM) { this.destroyElement(); }
}) was not a string.
Fixed by adding a remove
action:
{{ember-selectize remove='someAction'}}
Let's say I want to trigger some event on the page when the user selects something from the selectize component. Currently, I would have to set an observer on the value that selectize is bound to and fire an action that way. I realize the native ember select view doesn't offer this but it would be nice to have.
This is a little concerning because it makes writing integration tests more difficult.
ember s
You'll see
Uncaught TypeError: Cannot set property '_elementInserted' of null
in your JavaScript console
Bad error, the package is not installed correctly.
(Path or pattern "bower_components/selectize/dist/js/standalone/selectize.js" did not match any files)
This is the error:
Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
at /Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/models/project.js:482:53
at baseFindIndex (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/lodash/internal/baseFindIndex.js:16:9)
at /Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/lodash/internal/createFind.js:18:19
at Project.findAddonByName (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/models/project.js:481:20)
at Class.module.exports.Task.extend.findDefaultBlueprintName (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:63:30)
at Class.module.exports.Task.extend.installBlueprint (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:52:30)
at Class.<anonymous> (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/lib/tasks/addon-install.js:42:19)
at lib$rsvp$$internal$$tryCatch (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:501:17)
at lib$rsvp$$internal$$publish (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:472:11)
at lib$rsvp$asap$$flush (/Users/f/Projects/iRonin/time_tracking/chrome-extension/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1290:9)
at process._tickCallback (node.js:355:11)
Is anyone really using it?
It is really a pain to maintain, adds a lot of dependencies and we all should be moving towards ember cli.
I was just checking here if someone is actually using it.
I can't get optgroup
field to work correctly. I get only on item, and it's the first group; no other groups show up.
// data
{
name: 'one',
optgroup: 'group1'
}
optionTemplate
,itemTemplate
,optionCreateTemplate
,optgroupHeaderTemplate
,optgroupTemplate
, optionView
,itemView
,optionCreateView
,optgroupHeaderView
and optgroupView
basically using the above-mentioned properties would cause ember throw an error saying view.renderToBuffer() is no longer available
. we should find a workaround for this. Maybe get the string representation of rendered view this way:
_getStringFromView:function(view){
view.createElement();
return view.element.outerHTML
},
i can get it done if you want
Currently adding required=true
doesn't work.
Great plugin! Thanks for the effort, works flawlessly out of the box
I'm wondering if it is possible to get the events callback information.
My use case is I have a manage route where there are multiple elements that may or may not be there in the db, and this list could be added to. However these elements aren't directly on the model but computed properties based on the relations in the database. When I remove an element from this list I need to know about it so I can update the element in the database (as this is a computed property on the model)
I hope that use case is clear, if not let me know
The addon currently unconditionally includes the bower_components/selectize/dist/css/selectize.css stylesheet. My Ember app is using Bootstrap 3, though, so this doesn't look so great. I was able to get things to look nice by changing index.js to use selectize.bootstrap3.css, but it would be nicer to have a way to configure which stylesheet is included.
I'm not familiar with developing Ember CLI addons or Node applications in general, and I don't see anything of obvious use in the Ember CLI documentation. If you have any idea how this could be implemented, I'd be happy to implement the feature myself and send you a PR.
onItemAdd: Ember.run.bind(this, '_onItemAdd'),
onItemRemove: Ember.run.bind(this, '_onItemRemove'),
onType: Ember.run.bind(this, '_onType')
How to make use of this options to insert new selection, remove selection?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.