在aurelia中使用materialize

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

cmd没有错误。以下是main.ts和index文件的内容，它们是顶部带有materialize桥的骨架类型脚本，无需进一步修改：

---

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

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

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

先过滤
Lorem ipsum dolor sit amet



次席
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet

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

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

先过滤
Lorem ipsum dolor sit amet



次席
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet

说明如何在没有插件的情况下导入它。对于这一点，一个插件将是矫枉过正的imo。@randy我已经尝试了用户在这个问题上的建议，但这行代码是：从“MaterializeCSS”导入{materialize}；失败并出现错误：TS2307:找不到模块“materialize css”。但是，在jspm_packages文件夹中，materialize安装正确（或者看起来是这样），并且在包json中，我具有materialize依赖项。您可以使用materialize，方法与引导工作完全相同。仔细检查骨架，您会发现，如果安装materialize，它就像引导一样位于

config.js

中。用materialize替换bootstrap提供的所有东西。实际上，这只是css和javascript库的导入。Config可能会说

'dogfalo/materialize'

，所以请导入该包。@randy谢谢您的帮助，到目前为止，我可以在全球范围内看到materialize样式。但是，我仍然无法初始化滑块或下拉列表等元素，这是我最关心的问题。您确定js文件导入正确吗？也许你需要一个插件来解释如何在没有插件的情况下导入它。对于这一点，一个插件将是矫枉过正的imo。@randy我已经尝试了用户在这个问题上的建议，但这行代码是：从“MaterializeCSS”导入{materialize}；失败并出现错误：TS2307:找不到模块“materialize css”。但是，在jspm_packages文件夹中，materialize安装正确（或者看起来是这样），并且在包json中，我具有materialize依赖项。您可以使用materialize，方法与引导工作完全相同。仔细检查骨架，您会发现，如果安装materialize，它就像引导一样位于

config.js

中。用materialize替换bootstrap提供的所有东西。实际上，这只是css和javascript库的导入。Config可能会说

'dogfalo/materialize'

，所以请导入该包。@randy谢谢您的帮助，到目前为止，我可以在全球范围内看到materialize样式。但是，我仍然无法初始化滑块或下拉列表等元素，这是我最关心的问题。您确定js文件导入正确吗？也许你需要一个我试着用过的词，加上“private element；”到可折叠的CustomAttribute，但它不起作用。另外，我使用的是问题中提到的Typescript，但还是谢谢你的回答。你能创建一个gist示例吗？gist示例如下：我使用了aurelia网站上的Typescript框架，在安装了框架包之后，控制台上是否有“jspm安装npm:materialize css”，然后添加了您的代码。在此处进行了编辑：我将更新答案。我尝试了，但不得不更改jQuery行。它仍然不起作用。你可以在这里找到最新的要点：我已经尝试使用它，添加了行“private element；”到可折叠的CustomAttribute，但它不起作用。另外，我使用的是问题中提到的Typescript，但还是谢谢你的回答。你能创建一个gist示例吗？gist示例如下：我使用了aurelia网站上的Typescript框架，在安装了框架包之后，控制台上是否有“jspm安装npm:materialize css”，然后添加了您的代码。在此处进行了编辑：我将更新答案。我尝试了，但不得不更改jQuery行。它仍然不起作用。您可以在此处找到更新的要点：