将 materializecss 与 aurelia 一起使用答案

【问题标题】：Using materializecss with aurelia将 materializecss 与 aurelia 一起使用
【发布时间】：2016-10-13 06:58:13
【问题描述】：

我想问一下是否有一步一步的方法来使用或配置与 Aurelia 的 materializecss。我目前能够运行我的 Aurelia 应用程序，直到教程中我的 index.html 如下所示：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <title></title>
</head>
<body aurelia-app>
   <script src="jspm_packages/system.js"></script>
   <script src="config.js"></script>
   <script>
      System.import('aurelia-bootstrapper');
   </script>
</body>
</html>

我目前正在使用 ASP .NET 5 Preview 空模板和 jspm 来安装 Aurelia。我已经用jspm install github:dogfalo/materialize 安装了materializecss，并从this link 复制了一些html代码来测试它是否有效。

这段代码进入了我的 app.html 文件

<template>
<ul class="collapsible" data-collapsible="accordion">
    <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>
</template>

虽然我的 app.html 文件有这个用于测试

export class App {
    constructor() {
       this.message = 'test app';
    }
}

我的 package.json 目前包含这些

{
 "jspm": {
   "directories": {
   "baseURL": "wwwroot"
 },
 "dependencies": {
   "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.16.0",
   "aurelia-framework": "github:aurelia/framework@^0.15.0",
   "dogfalo/materialize": "github:dogfalo/materialize@^0.97.0"
 },
 "devDependencies": {
   "babel": "npm:babel-core@^5.8.22",
   "babel-runtime": "npm:babel-runtime@^5.8.20",
   "core-js": "npm:core-js@^1.1.0"
  }
 }
}

当我在 Chrome 中浏览 index.html 文件时，我可以看到格式精美的可折叠文件，但是当我单击任何标题时，正文不会展开。 jspm好像没有引用或者没有正确配置js文件。

【问题讨论】：

我在这里写了一篇关于将第三方库集成到 Aurelia 的博客：davismj.me/blog/aurelia-drag-and-drop
我还写了一篇与这个主题更具体相关的博客：davismj.me/blog/semantic-custom-element

标签： javascript aurelia materialize

【解决方案1】：

你快到了——materialize 库有一个 javascript 组件，它启用了一些功能。在可折叠组件的文档中是这样的：

初始化

只有动态添加的可折叠元素才需要初始化。您也可以在初始化中传入选项，不过这也可以在 HTML 标记中完成。

$(document).ready(function(){
    $('.collapsible').collapsible({
      accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    });
  });

这些说明对静态页面很有用，但对像您这样的单页面应用没有帮助。您不能使用$(document).ready，因为当该事件触发时您的组件不在页面上。

要使组件正常工作，您可以做的最简单的事情是为视图模型提供对可折叠元素的引用，然后在其上调用$(element).collapsible()。以下是如何做到这一点...

首先，将ref属性添加到ul：

<template>
<ul ref="myElement" class="collapsible" data-collapsible="accordion">
    <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>
</template>

接下来，在元素附加到 DOM 时初始化可折叠：

export class App {
    constructor() {
       this.message = 'test app';
    }
    attached() {
       $(this.myElement).collapsible();
    }
}

最后，通过在您的 app.js 中添加以下行来确保加载了 materializecss jquery 组件：

import materialize from 'dogfalo/materialize';

如果您要处理大量视图或元素，这一切可能会变得乏味，因此您需要将此逻辑封装在 aurelia custom attribute 中以使事情更方便：

import {inject} from 'aurelia-framework';

@inject(Element)
export class CollapsibleCustomAttribute {
  constructor(element) {
    this.element = element;
  }

  attached() {
    ${this.element).collapsible();
  }
}

现在您可以简单地将collapsible 属性添加到您的元素，它会自动初始化materializecss 的行为。

【讨论】：

有效！非常感谢@jeremy。但是，我能问一些关于自定义属性示例的问题吗？我使用您提供的相同代码创建了类似 collapsible-custom-attribute.js 的东西。如何引用这个新的自定义属性？我是否也将它保存在 index.html 和 app.html 所在的位置？目前，这是唯一对我不起作用的部分。
我能够使用 Aurelia 的 require 自定义元素使其工作。还将尝试使用 globalizeResource() 配置方法使其工作。我现在的问题是如何使物化波效果起作用。你能帮我解决这个问题吗？
github.com/jdanyow/aurelia-breeze-northwind/blob/master/src/…
我在您的回答方面取得了进展。你能再帮我一次，告诉我如何向初始化函数调用发送参数吗？像 .collapsible() 一样，有手风琴和可扩展选项。
我收到错误“'ElementFinder' 类型上不存在属性 'Dropdown'”。这是来自问题：stackoverflow.com/questions/35892713/…

【解决方案2】：

由于我只想要 materializecss 的一些特定功能，因此我通过将 materialize 文件复制到我的样式文件夹 stlye/scss、style/js style/font 来做到这一点。结构是这样的

src/
    index.html
    config.js
    app/
        app.js
        …
    style/
        font/
        js/
        images/
        scss/

在我的 index.html 中，我只加载我真正想要的 js 文件。

<script>
    System.import('aurelia-bootstrapper');
    System.import('jquery').then(function() {
        window.Materialize = {};
        System.import('style/js/forms');
        System.import('style/js/waves');
        System.import('style/js/jquery.easing.1.3');
        System.import('style/js/velocity.min');
        System.import('style/js/hammer.min').then(function() {
            System.import('style/js/jquery.hammer');
        });
    });
</script>

在我的主 scss 文件中，我还只包含了我真正需要的样式文件。您也可以使用jspm install github:dogfalo/materialize 安装它并使用System.import('dogfalo/materialize') 将其加载到index.html 中

希望它可以帮助您找到自己的方式:)

【讨论】：