在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

可以选择将实现的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屋！