Aurelia和Select2更改活动

Question

How can I utilize Aurelia's data binding with Select2? It seems to work just fine with a standard select.

Ideally I would like to use change.delegate in the select element to call a method within my View Model so I would have access to the data storage we are injecting.

The only way I can get an event to fire is to wire up a change event in the attached() handler, but then the data storage falls out of scope.

View:

<template>
    <label>Company:</label>
    <!-- i would like to use change.delegate="change()" below -->
    <select value.bind="selectedCompanies" multiple>  
        <option repeat.for="company of companies" model.bind="company.CompanyId">${company.CompanyName}</option>
    </select>
</template>

View Model:

import {inject, bindable} from 'aurelia-framework'; 
import {FilterCompanyData} from 'data/custom elements/filters/filterCompanyData';
import {UserStorage} from 'storage/userStorage';

@inject(Element, FilterCompanyData, UserStorage)
export class FilterCompanyCustomElement {
    @bindable selectedCompanies;

    constructor(element, filterCompanyData, userStorage) {
        this.element = element;
        this.filterCompanyData = filterCompanyData;
        this.userStorage = userStorage;
        this.companies = [];
    }

    bind(bindingContext, overrideContext) {
        let userId = this.userStorage.userId;

        return this.filterCompanyData
            .getCompanies(userId)
            .then(response => this.companies = response);
    }

    attached() {
        var el = $(this.element).find('select');
        var sel = el.select2({ 
            closeOnSelect: false
        });

        // Is it possible to get rid of this? 
        sel.on('change', function (event) {
            if (event.originalEvent) { return; }

            // TODO add changed data to user storage

            var IE = ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true));
            var notice = IE ? new CustomEvent('change', { bubble: false }) : new Event('change', { bubble: false });

            $(el)[0].dispatchEvent(notice);
        });
    }

    detached() {
        $(this.element).find('select').select2('destroy');
    }

    change() {
        // I'd like to use this method from change.delegate
        // TODO add changed data to user storage
    }
}

On a side note doesn't Aurelia have a built in polyfill for New Event? IE doesn't seem to like that.

Answer 1

I see that this question is getting old, but i have tried to do the same that you are doing here, and i ended up with the following:

https://github.com/Kla3mus/select24aurelia

I don't use the polyfill, or the original events outside of the component. I use two-way binding for the option and selected value instead. Maybe that could work for you too?

It's written in TypeScript, but it's almost the same as JavaScript, so i think you will be able modify it :)