将 materializecss 与 aurelia 结合使用

Question

我想问一下是否有使用或配置 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 文件时，我可以看到格式良好的可折叠文件，但是当我单击任何 headers 文件时，body 不会扩张。好像js文件没有被jspm引用或者配置不正确。

Answer 1

您就快完成了 - materialize 库有一个 javascript 组件可以启用某些功能。在可折叠组件的文档中有这样的内容：

Initialization

Collapsible elements only need initialization if they are added dynamically. You can also pass in options inside the initialization, however this can be done in the HTML markup as well.

$(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();
    }
}

最后，确保加载了 materializecss jquery 组件，方法是将以下行添加到您的 app.js:

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 的行为。

Answer 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

希望它能帮助您找到自己的出路:)

将 materializecss 与 aurelia 结合使用

Using materializecss with aurelia

javascript

materialize

aurelia

Initialization