如何使用Aurelia的bootstrap-select或任何其他js控件？

Question

Not sure what I am missing here, probably something silly, but I am unable to find anything regarding, let's say how to use bootstrap-select control in Aurelia views. Can someone point me to the right article please? PS: I am not looking to create another custom control out of bootstrap-select but use as it as. Request for your help. https://silviomoreto.github.io/bootstrap-select/

Answer 1

You can create a custom attribute that adds the bootstrap-select behavior to the <select> element. Here's an example:

http://plnkr.co/edit/So23Hm?p=preview

bootstrap-select.js

import {inject} from 'aurelia-framework';

const defaultOptions = {
  style: 'btn-info',
  size: 4
};

@inject(Element)
export class BootstrapSelectCustomAttribute {
  constructor(element) {
    this.element = element;
  }

  attached() {
    let options = Object.assign({}, defaultOptions, this.value || {});
    $(this.element).selectpicker(options);
  }

  detached() {
    $(this.element).selectpicker('destroy');
  }
}

app.html :

<template>
  <require from="./bootstrap-select"></require>

  <select value.bind="selectedPlanet" bootstrap-select>
    <option model.bind="null">Select a planet</option>
    <option repeat.for="planet of planets" model.bind="planet">${planet.name}</option>
  </select>
</template>

app.js :

export class App {
  selectedPlanet = null;
  planets = [
    { name: 'Mercury', diameter: 3032 },
    { name: 'Venus', diameter: 7521 },
    { name: 'Earth', diameter: 7926 },
    { name: 'Mars', diameter: 4222 },
    { name: 'Jupiter', diameter: 88846 },
    { name: 'Saturn', diameter: 74898 },
    { name: 'Uranus', diameter: 31763 },
    { name: 'Neptune', diameter: 30778 }];
}

Pass options to the selectpicker call like this:

<select bootstrap-select.bind="{ size: 4 }">

Or like this:

<select bootstrap-select.bind="myOptions"> <!-- assumes there's a myOptions property on your view-model -->

Answer 2

You need to fit it into the Aurelia lifecycle, but other than that, you're free to do as you like.

If you look here you will find a couple of examples of using jQuery plugins in Aurelia. A relatively complex example being the Autocomplete widget. This is a custom control wrapping the jQuery plugin, which I think you don't want to do, but it should still give you an idea of how to implement it.

Answer 3

Extending Jeremy's answer and partially solving the refresh question, you could add something like this.

I couldn't find any legal way to get an event when the source of the repeater changed in a custom attribute. If anyone knows a better/elegant/decent way, please share.

Based on this answer Two way binding not working on bootstrap-select with aurelia , you could add a "task" that queries the length of the select and if the length changes, call the refresh.

With a little variation from the original, I decided to abort the task when the elements length changes the first time. In my case, they will always change only once, when updated after getting them from the database.

    bind() {
        var _this = this;
        var sel = this.element;
        var prevLen = sel.options.length || 0;
        var addOpt = setInterval(function () {
            var len = sel.options.length || 0;
            if (len != prevLen || len > 0) {
                clearTimeout(addOpt); //abort the task
                $(_this.element).selectpicker("refresh");
            }
        }, 250);
    };

As a way of disclaimer, I'm against writing code like this. It wastes resources when there should be a better way to solve this problem.

Finally, I started saying that it partially solved the refresh problem. Since it aborts the execution after the first change (assuming that no more changes are going to happen), if the items change more than once, this task would need to run forever.