在 aurelia 中使用物化

Question

我一直在努力让 materialize-css 框架与 Aurelia 一起工作。我在框架中使用 Typescript，并在 Windows 8 上通过带有 'gulp watch' 的 cmd 运行服务器。到目前为止，我已经按照提供的说明尝试使用 aurelia-materialize 桥。但是，在执行完这些步骤后，我使用 chrome 得到以下控制台输出： console error

命令没有错误。这些是 main.ts 和索引文件的内容，它们是顶部带有物化桥的框架打字稿，没有进一步修改： The image on the left is main.ts, the image on the right is index.html

可以选择将实体化 css 和 js 导入添加到 index.html 文件，但我不知道如何在需要它们的组件上调用初始化函数，例如滑块。任何帮助或替代方案将不胜感激。

Answer 1

将 CSS 框架与 Aurelia 集成的最佳策略是在必要时创建自定义属性。下面是如何为可折叠对象创建自定义属性的示例：

collapsibleCustomAttribute.js

import 'materialize-css'; // the loads the materialize library

@inject(Element)
export class CollapsibleCustomAttribute {

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

    attached() {
        this.element.collapsible({
          accordion: false
        });
    }
}

app.html

<require from="./collapsibleCustomAttribute">
<ul class="collapsible" collapsible>
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>

在 aurelia 中使用物化

Using materialize in aurelia

materialize

aurelia