在Aurelia中使用materializecss [英] Using materializecss with aurelia
问题描述
我想问一下是否有逐步的方法来使用或配置Aurelia的materializecss.目前，我可以在教程中的index.html看起来像这样的地方运行我的Aurelia应用程序:
<!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，并从此链接复制了一些html代码，以测试其是否有效. /p>
此代码进入了我的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文件.
您快到了-实体化库具有一个启用某些功能的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中 现在，您只需将 I would like to ask if there's a step by step way to use or configure materializecss with Aurelia. I'm currently able to run my Aurelia app up to the point in the tutorials where my index.html looks like this: I'm currently using the ASP .NET 5 Preview empty template and jspm to install Aurelia. I have installed materializecss with This code went into my app.html file while my app.html file has this for the test and my package.json currently contains these When I browse the index.html file in Chrome, I can see the nicely formatted collapsible but when I click on any of the headers the body would not expand. It seems that the js file is not referenced or was not configured correctly by jspm. You're almost there- the materialize library has a javascript component that enables some of the features. In the documentation for the collapsible component there's this: 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.
These instructions are useful for static pages but not helpful with single-page-apps like yours. You can't use The simplest thing you can do to get the component working is to give the view-model a reference to the collapsible element and then call First, add the Next, initialize the collapsible when the element is attached to the DOM: Finally, make sure the materializecss jquery components are loaded by adding the following line to your app.js:
All this could get tedious if you're dealing with a lot of views or elements, so you'll want to wrap this logic up in an aurelia custom attribute to make things more convenient: Now you can simply add the 这篇关于在Aurelia中使用materializecss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！import {inject} from 'aurelia-framework';
@inject(Element)
export class CollapsibleCustomAttribute {
constructor(element) {
this.element = element;
}
attached() {
${this.element).collapsible();
}
}
collapsible属性添加到元素中，它将自动初始化materializecss的行为.<!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>
jspm install github:dogfalo/materialize and copied some html code from this link to test if it works.<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>
export class App {
constructor() {
this.message = 'test app';
}
}
{
"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"
}
}
}
Initialization
$(document).ready(function(){
$('.collapsible').collapsible({
accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
$(document).ready because your the component isn't on the page when that event fires.$(element).collapsible() on it. Here's how to do that...ref attribute to the 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>
export class App {
constructor() {
this.message = 'test app';
}
attached() {
$(this.myElement).collapsible();
}
}
import materialize from 'dogfalo/materialize';
import {inject} from 'aurelia-framework';
@inject(Element)
export class CollapsibleCustomAttribute {
constructor(element) {
this.element = element;
}
attached() {
${this.element).collapsible();
}
}
collapsible attribute to your element and it will initialize the materializecss's behavior automatically.
