在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中使用實現

回答

相關問題