Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
ux-selectize Aurelia custom element
import selectize from "selectize";
import {
inject,
bindable,
Container,
ViewEngine,
bindingMode,
dynamicOptions
} from "aurelia-framework";
import { DOM } from "aurelia-pal";
@dynamicOptions
@inject(Element, Container, ViewEngine)
export class UxSelectizeCustomAttribute {
constructor(element, container, viewEngine) {
this.element = element;
this.selected = {};
this.container = container;
this.viewEngine = viewEngine;
}
attached() {
if (this.httpQuery) this.initializeRemoteSelectize();
else {
this.initializeClientSelectize();
}
}
initializeClientSelectize() {
this.selectizeElement = $(this.element).selectize()[0];
}
initializeRemoteSelectize() {
this.loadSelectItemView(this.templateUrl).then(viewFactory => {
this.selectizeElement = $(this.element).selectize({
valueField: this.valueField,
labelField: this.labelField,
searchField: this.searchField,
render: {
option: (item, escape) => {
return this.getHtml(item, viewFactory);
}
},
load: (query, callback) => {
this.httpQuery(query)
.then(data => {
callback(data);
})
.catch(error => {
callback();
});
},
onChange: () => {
let notice = new Event("change", { bubbles: true });
$(this.element)[0].dispatchEvent(notice);
}
})[0];
});
}
loadSelectItemView(templateUrl) {
return this.viewEngine.loadViewFactory(templateUrl);
}
getHtml(item, factory) {
const childContainer = this.container.createChild();
const view = factory.create(childContainer);
view.bind(item);
let country = DOM.createElement("div");
view.appendNodesTo(country);
return country.outerHTML;
}
unbind() {
this.selectizeElement.selectize.destroy();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment