在 aurelia 中使用实现 [英] Using materialize in aurelia

问题描述

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

I have been trying to get the materialize-css framework to work with Aurelia. I am using Typescript with the framework, and running the server on Windows 8 through the cmd with 'gulp watch'. So far I have attempted to use the aurelia-materialize bridge, following the instructions provided. However, after I have followed the steps, I get the following console output using chrome: console error

cmd 没有错误.这些是 main.ts 和 index 文件的内容，它们是具有实体化桥的骨架打字稿，无需进一步修改:左边图片是main.ts，右边图片是index.html

The cmd is clean of errors. These are the contents of the main.ts and index files which are the skeleton-typescript with the materialize bridge on top, without further modification: The image on the left is main.ts, the image on the right is index.html

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

There is the option of adding the materialize css and js imports to the index.html file, but I do not know how to then call the initializing functions on components that require them, such as sliders. Any help at all or alternatives would be appreciated.

推荐答案

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

The best strategy for integrating a CSS framework with Aurelia is to create, where necessary, custom attributes. Here's an example of how to create a custom attribute for a collapsible:

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 中使用实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！