如何在 Aurelia 中导入 ion-rangeslider

Question

我正在尝试在 Aurelia 中使用 ionRangeSlider 插件，但不确定如何使用它。

https://github.com/IonDen/ion.rangeSlider/issues

我已将它 jspm 到我的项目中，但如何导入它以及调用运行插件的函数？

Answer 1

这是一个如何使用 bootstrap 弹出窗口的示例。我想你应该能够做同样的事情，并从 bind 函数中调用 $("#example_id").ionRangeSlider(); 如果您导入了所有资源

Answer 2

您会在 package.json 中找到包含 ion-rangesider 的确切包名：

jspm": {
   "dependencies": {
        ...
        "ion-rangeslider": "npm:ion-rangeslider@^2.1.3",
        "jquery": "npm:jquery@^2.2.3",
         ...
    }
}

然后您需要创建自己的自定义元素，例如：

import {inject, noView} from 'aurelia-framework';
//import your dependencies
import $ from 'jquery';
import ionRangeSlider from 'ion-rangeslider';

@noView()
@inject(Element)
export class Slider {

    constructor(element){
        this.element = element; 
    }

    bind(){
        $(this.element).ionRangeSlider({min: 100, max: 1000, from: 550});
    }
}

在你想使用滑块的地方你必须写：

<require from='./slider'></require> 
<require from="ion-rangeslider/css/ion.rangeSlider.skinHTML5.css"></require>
<require from="ion-rangeslider/css/ion.rangeSlider.css"></require>
<slider></slider>

通常你会把<require from="xxx.css"></require>标签放在slider.html里面来确保样式封装。在我的示例中，我将它们放在我想使用滑块的位置，因为这样我就不需要创建 slider.html.

Answer 3

首先安装 ion-rangeslider：

npm 安装 ion-rangeslider

jspm 安装npm:ion-rangeslider

创建自定义属性

import {customAttribute, bindable, inject} from 'aurelia-framework';
import {ionRangeSlider} from 'ion-rangeslider';    
@customAttribute('rangeslider')
@inject(Element)
export class RangesliderCustomAttribute {
  //make your own options based on requirements
  options = { type: "single", min: 0, max: 100 };    
  constructor(element) {
    this.element = element;
  }
  attached() {
    $(this.element).ionRangeSlider(this.options).on('change', e => {
      fireEvent(e.target, 'input');
    });
  }

  detached() {
    $(this.element).ionRangeSlider('destroy').off('change');
  }
}

function createEvent(name) {
  var event = document.createEvent('Event');
  event.initEvent(name, true, true);
  return event;
}

function fireEvent(element, name) {
  var event = createEvent(name);
  element.dispatchEvent(event);
}

将 css 导入 app.html 或您在应用程序中导入 css 的位置

<require from="ion-rangeslider/css/ion.rangeSlider.css"></require>
<require from="ion-rangeslider/css/ion.rangeSlider.skinNice.css"></require>

现在您可以在任何视图的输入中使用您的属性

<require from="./rangeslider"></require>
<input rangeslider type="text" value.bind="yourInitialSliderValue">

如何在 Aurelia 中导入 ion-rangeslider

How to import ion-rangeslider in Aurelia

aurelia