javascript – 使用materializecss和aurelia

2023-01-11 14:18:31

我想询问是否有一步一步的方法来使用或配置与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.我已经安装了materializecss withjspm install github：dogfalo / materialize并从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文件时,我可以看到格式良好的可折叠文件,但是当我点击任何标题时,正文将无法展开.似乎没有引用js文件或jspm没有正确配置js文件.

解决方法:

你几乎就在那里 – 物化库有一个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();
    }
}

最后,通过在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的行为.

码农公寓

Initialization

相关文章