在aurelia中使用实现

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

cmd清除了错误。这些都是main.ts和索引文件，这是骨架打字稿，顶部的一个物质化桥的内容，没有进一步修改： The image on the left is main.ts, the image on the right is index.html

有添加Materialise的CSS和JS进口指数的选择.html文件，但我不知道如何在需要它们的组件上调用初始化函数，例如滑块。任何帮助或替代品将不胜感激。

来源

2016-07-14 The lightbringer

http://stackoverflow.com/questions/33574208/trouble-imported-materialize-into-an-aurelia-project解释了如何在没有插件的情况下导入它。一个这样的插件将是过度的imo。 – Randy

@randy我同意。 –

@randy我已经尝试过这个问题中的用户所建议的内容，但是这一行：从'materialize-css'导入{materialize}; 失败，错误： TS2307：无法找到模块'materialize-css' 但是，在jspm_packages文件夹中，materialize安装正确（或者看起来），并且在包json中我有物化依赖项。 –

将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>

来源

2016-07-14 17:54:05

我尝试过使用这个，加入'private元素'这一行。到collapsibleCustomAttribute，但它不起作用。此外，我正在使用问题中提到的Typescript，但无论如何感谢您的答案。 –

你可以创建一个要点吗？ –

这个要点在这里：https：//gist.github.com/anonymous/de137e71859787b0c3fe826b77ac073a 我做了以下工作：使用aurelia网站的typescript skeleton，在安装完成后在控制台上执行'jspm install npm：materialize-css'包的骨架，然后添加你的代码。 –

在aurelia中使用实现

回答

相关问题