我正在尝试创建一个 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>