2

我正在尝试创建一个 customElement,它使用 jquery 插件来创建幻灯片。对于这个插件,没有 jspm 包 ofc。我不想创建一个,因为我对 jspm 不太熟悉。

所以我将 js 文件及其依赖项添加到系统加载器中,它也被加载了。

现在我想创建一个 customElement,它有一个绑定方法,可以使用自定义元素调用插件。(请参阅我的代码)。问题是,构造函数或绑定方法根本没有被调用。什么都没有渲染。

*.js:

import {bindable, customElement, inject} from 'aurelia-framework';
import $ from 'jquery';
import 'jquery.bxslider';


@customElement('slider')
export class NewsSlider {
    constructor(element)
    {
        this.elem = element;
    }
    bind() {
        console.log('test');
    }
    @bindable items;
}

*.html:

<template>
    <ul class="bxslider" ref="slide">
        <li repeat.for="newsItem of items">
            <div class="slide-container quote" css="background-image: url('/backend/content/${newsItem.Image}'); background-size: cover; height: 650px;">
                <div class="overlay">
                    <h2> ${newsItem.Title} </h2>
                    <p> ${newsItem.Content} <p/>
                </div>
            </div>
        </li>

    </ul>
</template>

用法:

<template>
    <require from="./slider" />
    <p repeat.for="new of news">
        ${new.Content}
    </p>
<slider items.bind="news"></slider>
</template>

4

0 回答 0