如何在Aurelia中导入离子测距仪 [英] How to import ion-rangeslider in Aurelia

问题描述

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

I am trying to use the ionRangeSlider plugin in Aurelia but am not sure how to make use of it.

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

我已将其jspmd到我的项目中，但是如何导入它以及调用运行该插件的一个函数呢?

I have jspm'd it into my project but how do I import it as well as call the one function that runs the plugin?

推荐答案

您将在package.json中找到包含ion-rangesider的确切软件包名称:

You will find the exact package names for including ion-rangesider in your package.json:

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

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

Then you need to create your own custom element like:

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

在要使用滑块的地方，您必须编写:

And where you want to use your slider you have to write:

<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.

Normally you would put the <require from="xxx.css"></require> tags inside slider.html to ensure style encapsulation. In my example i put them where i wanted to use the slider because so i don´t needed to create a slider.html.

这篇关于如何在Aurelia中导入离子测距仪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！