Question

不确定我在这里缺少什么，可能是愚蠢的，但我无法找到任何关于，让我们说如何在Aurelia视图中使用bootstrap-select控件。有人能指出我正确的文章吗？ PS：我不打算用bootstrap-select创建另一个自定义控件但是使用它。请求您的帮助。 https://silviomoreto.github.io/bootstrap-select/

Answer 1

您可以创建一个自定义属性，将自举选择行为添加到<select>元素。这是一个例子：

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

<强>自举-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 }];
}

将选项传递给selectpicker，如下所示：

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

或者像这样：

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

Answer 2

你需要适应Aurelia的生命周期，但除此之外，你可以自由地按照自己的意愿去做。

如果看一下here，你会发现一些在Aurelia中使用jQuery插件的例子。一个相对复杂的例子是自动完成小部件。这是一个包装jQuery插件的自定义控件，我认为你不想这样做，但它仍然可以让你知道如何实现它。

Answer 3

扩展Jeremy的答案并部分解决刷新问题，你可以添加这样的东西。

在自定义属性中更改了转发器的源时，我找不到任何合法的方法来获取事件。如果有人知道更好/优雅/体面的方式，请分享。

根据这个答案Two way binding not working on bootstrap-select with aurelia，您可以添加一个查询选择长度的“任务”，如果长度发生变化，请调用刷新。

与原版有一点差异，我决定在元素长度第一次改变时中止任务。在我的情况下，从数据库中获取更新后，它们将始终只更改一次。

    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);
    };

作为免责声明的一种方式，我反对编写这样的代码。当应该有更好的方法来解决这个问题时，它会浪费资源。

最后，我开始说它部分解决了刷新问题。由于它在第一次更改后中止执行（假设不会发生更多更改），如果项目更改多次，则此任务需要永久运行。

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

3 个答案: