在 aurelia 中使用物化

Question

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

cmd 没有错误。这些是 main.ts 和 index 文件的内容，它们是骨架打字稿，顶部有物化桥，无需进一步修改： 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>