Items/options rendering customization

[martinmaillard]

It would be great if we could pass a template name (or view class) to ember-selectize instead of optionValuePath and optionLabelPath to customize the way items/options are rendered.

Selectize's render option offers a powerful way to customize display. I guess it is the easiest way to go but it would probably require rendering a view into a string. I don't know if ember allows that.

[miguelcobain]

I agree with you, however let me state two things here:

• optionValuePath and optionLabelPath are desirable as well. The main purpose of this project is to be a drop-in replacement of Ember.Select. Ember takes this approach.
• Nevertheless, adding support for additional features from Selectize is also desirable (like the item creation which we already support)

That being said, I'm afraid what you're proposing won't be easy. In another project called ember-leaflet, we're trying to use Ember Views for Leaflet popups (you can imagine the advantages). See issue here: gabesmed/ember-leaflet#30.
However, we still haven't found any good way to do that. I believe the problem is very similar.

I'll leave this open to collect people's ideas, and of course, PR are welcome. I'll keep an eye on the issue.

[martinmaillard]

I agree. I didn't mean that you should remove optionValuePath and optionLabelPath.

[knownasilya]

This should be very possible if not using handlebars.runtime.. maybe using Ember.Handlebars.compile.

[miguelcobain]

Would that allow us to have template bindings to a context as well?
Anyway, the possibility of having Views would certainly be more flexible (we could have custom logic encapsulated). But for this simple case, a template name would be great!

Suggestions and PR's are very welcome! Thanks.

[miguelcobain]

@knownasilya, as stated in the referenced issue, this is not something easy to accomplish. Not until selectize accepts DOM elements from the render functions.

[miguelcobain]

Support for templates and views landed in master.

Now you can use any of the properties
'optionTemplate','itemTemplate','optionCreateTemplate','optgroupHeaderTemplate','optgroupTemplate' 'optionView','itemView','optionCreateView','optgroupHeaderView' and 'optgroupView'.

View takes precedence over template, so if you do strange things like setting optionView and optionTemplate, the latter will be ignored.

Keep in mind that this currently does not work in Ember 1.8.0. See this issue for more info: emberjs/ember.js#5534

[martinmaillard]

Great ! Thanks :)

[domchristie]

Does this work in Ember 1.9+?

I’m currently getting an exception when specifying optionTemplate:

TypeError: undefined is not a function
    at exports.default.Ember.default.Component.extend._getStringFromView (http://localhost:4200/assets/vendor.js:93723:12)
    at exports.default.Ember.default.Component.extend._templateToString (http://localhost:4200/assets/vendor.js:93707:19)
    at exports.default.Ember.default.Component.extend.renderOptions.Ember.default.computed.functionNames.forEach.renderFunctions.(anonymous function) (http://localhost:4200/assets/vendor.js:93271:29)
    at $.extend.render (http://localhost:4200/assets/vendor.js:69491:46)
    at $.extend.refreshOptions (http://localhost:4200/assets/vendor.js:68497:24)
    at exports.default.Ember.default.Component.extend.contentArrayDidChange (http://localhost:4200/assets/vendor.js:93589:24)
    at applyStr (http://localhost:4200/assets/vendor.js:29193:29)
    at sendEvent (http://localhost:4200/assets/vendor.js:23343:13)
    at __exports__.default.Mixin.create.arrayContentDidChange (http://localhost:4200/assets/vendor.js:40162:9)
    at EmberObject.extend.arrangedContentArrayDidChange (http://localhost:4200/assets/vendor.js:43974:14)

Ember v1.10.0, Ember-CLI v0.2.0

[miguelcobain]

Ember dropped an important API that made this work.
We'll need to find another way to make this work. Meanwhile you can use optionFunction to return an HTML string.

[domchristie]

OK. Thanks for the update.

[cottrellio]

Any update on this?

[miguelcobain]

I remind you that this repository is not maintained anymore, in favor of the ember-cli addon version (as stated in the README).

[miguelcobain]

I remind you that this repository is not maintained anymore, in favor of the ember-cli addon version (as stated in the README).

[Ramblurr]

People are getting here from the link in the ember-cli version's readme, maybe that link should be updated.