Ted*_*ino 3 javascript materialize aurelia
我想询问是否有一步一步的方法来使用或配置与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 jspm install github:dogfalo/materialize并从这个链接复制了一些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组件,可以启用一些功能.在可折叠组件的文档中,有以下内容:
初始化
可折叠元素只有在动态添加时才需要初始化.您也可以在初始化中传入选项,但这也可以在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 自定义属性中以使事情更方便:
import {inject} from 'aurelia-framework';
@inject(Element)
export class CollapsibleCustomAttribute {
constructor(element) {
this.element = element;
}
attached() {
${this.element).collapsible();
}
}
现在您可以简单地将collapsible属性添加到元素中,它将自动初始化materializecss的行为.
| 归档时间： |
|
| 查看次数： |
2137 次 |
| 最近记录： |