ülfer

My personal blog about nothing specific..

[ulferorg-blog]

NY TechDay ‘15

NY TechDay is week away! Register here:

https://techdayhq.com/events/ny-techday/attendees/start

[ulferorg-blog]

Entrepreneurs Roundtable Accelerator

[ulferorg-blog]

Select2 and Emberjs

I wanted to use Select2 with Emberjs in my application so I came up with following solution. It's not perfect and I should probably write it as a ember component but that's fine for now :

App.Select2SelectView = Ember.Select.extend({ didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this, 'processChildElements'); }, processChildElements: function() { var options = {}; options.placeholder = 'Please select...'; options.allowClear = true; options.closeOnSelect=true; options.width = '100%'; this.$().select2(options); }, willDestroyElement: function () { this.$().select2("destroy"); }, selectedDidChange : function(){ this.$().select2('val', this.$().val().toString()); }.observes('selection.@each') }); App.Select2TagView = Ember.TextField.extend({ didInsertElement: function() { Ember.run.scheduleOnce('afterRender', this, 'processChildElements'); }, processChildElements: function() { var options = {}; options.placeholder = 'Please select...'; options.allowClear = true; options.closeOnSelect=true; options.width = '100%'; options.tags = this.get('tags') || []; this.$().select2(options); }, willDestroyElement: function () { this.$().select2("destroy"); }, selectedDidChange : function(){ this.$().select2('val', this.get('value').split(',')); }.observes('value') });

Usage

Predefine some data

App.Enums = {}; App.Enums.Currencies = [ {id: 840, text: 'USD'}, {id: 978, text: 'EUR'}, {id: 949, text: 'TRY'} ]; App.Enums.Tags = ["Vendor", "Supplier","Client"];

And use select2 views in your template

{{view App.Select2SelectView contentBinding="App.Enums.Currencies" optionValuePath="content.id" optionLabelPath="content.text" selectionBinding="data.currency" }} .... {{view App.Select2TagView valueBinding="data.tags" tagsBinding="App.Enums.Tags"}}

[ulferorg-blog]