var svg = document.getElementById('test'),
use = svg.lastElementChild;
alert(use.getAttributeNS(null, 'x'));
// "200"
alert(use.getAttributeNS('http://www.w3.org/1999/xlink', 'href'));
// "#shape"
alert(use.getAttributeNS('http://foo.io/bar', 'foo'));
// null - why?<svg id="test"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:test="http://foo.io/bar">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
<use xlink:href="#shape" x="200" y="50" test:foo="bar" />
</svg>使用淘汰赛,我可以动态更改表格行的模板,这样当我点击它时,使用编辑模板可以编辑行.没有导航,没有路由,只是为行分配一个新模板.我怎么在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 …我有一个简单的类,Event具有计算属性:
import moment from 'moment';
export class Event {
constructor(data) {
Object.assign(this, data);
}
get playedFromNow() {
return moment(this.CreateDate).fromNow();
}
}
playedFromNow只返回一个基于CreateDate属性的字符串,比如7 minutes ago.
viewmodel获取一系列事件,视图呈现事件.每次发生新事件(每隔几分钟),阵列就会通过websockets进行更新.
<div repeat.for="event of events">
<div class="media-body">
<h4 class="media-heading">${event.title} <small>${event.playedFromNow}</small></h4>
</div>
</div>
和(相关)viewmodel代码:
let socket = io();
socket.on(`new-event`, (data) => {
this.events.unshift(new Event(data)); // add to the event array at the top
});
// subscribe
let subscription = bindingEngine.collectionObserver(this.events).subscribe();
// unsubscribe
subscription.dispose();
目前该属性是脏的检查,这意味着该属性被检查并经常更改 - 这是有点不必要的,屏幕上显示了很多事件,所以我担心随着时间的推移性能.有没有办法可以根据数组绑定触发重新计算并更新VM中的代码？:
我想创建自己的aurelia插件,我创建了一个文件夹my-plugin并将其index.js放入其中.我在main.js中添加了它use.plugin("my-plugin").运行时,我找不到my-plugin.我将它添加到package.json下的jspm部分,但是当调用jspm install时,我将my-plugin安装到my-plugin没有提供注册表属性.
如何在不使用jspm的情况下在本地使用插件.
提前致谢 ...
在完成开始教程时,有一个"需要"引导库(CSS):
<require from="bootstrap/css/bootstrap.css"></require>
<require from="font-awesome/css/font-awesome.css"></require>
当我查看Chrome的检查器时,我发现这些CSS文件不是源代码.相反,它似乎在页面中全部内联.
这是真的,还是调试器的东西？如果是 - 这不会影响浏览器中的缓存(CSS需要重新下载)吗？
App.js
export class App {
constructor() {
this.widgets = [{ name: 'zero'}, {name: 'one'}, {name:'two'}];
this.shipment = { widget: this.widgets[1] };
}
}
App.html
<template>
<require from="./widget-picker"></require>
<require from="./some-other-component"></require>
<widget-picker widget.bind="shipment.widget" widgets.bind="widgets"></widget-picker>
<some-other-component widget.bind="shipment.widget"/>
</template>
窗口小部件,picker.js
import {bindable, bindingMode} from 'aurelia-framework';
export class WidgetPicker {
@bindable({ defaultBindingMode: bindingMode.twoWay, changeHandler: 'widgetChanged' })
widget;
@bindable widgets;
widgetChanged(widget) {
// Use an Event Aggregator to send a message to SomeOtherComponent
// to say that they should check their widget binding for updates. …给出app.html的以下布局:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div id="sidebar"><h3>This is the sidebar.</h3></div>
<div id="page-host" class="page-host">
<router-view></router-view>
</div>
</template>
如何在nav-bar.html中绑定toggleSidebar函数(从app.js导出)？
<template bindable="router">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
....
<a class="navbar-brand" href="#" click.trigger="toggleSidebar()">
<i class="fa fa-bars"></i>
<span>${router.title}</span>
</a>
</div>
....
</nav>
</template>
目前,当我点击toggleSidebar链接时出现以下错误:
"toggleSidebar不是一个函数".
我正在为我们的内部框架编写可重用的组件,以抽象出一些猴子代码.大部分场景都是使用插槽实现的,效果很好.但是,某些场景需要在for循环内部渲染模板,不幸的是,那里不支持插槽.
我想出了以下(工作)代码:
<template>
<div class="form-group">
<label for.bind="titleSafe" class="control-label">{title}</label>
<select id.bind="titleSafe" value.bind="value" class="form-control">
<option repeat.for="item of itemsSource" >
<template replaceable part="item-template" containerless>${item}</template>
</option>
</select>
</div>
</template>
这个代码有IMO的多个问题,使得它成为将其包含在框架中的不良候选者:
因此我去寻找替代品.经过一些研究,我想出了类似的东西:
<template>
<div class="form-group">
<label for.bind="titleSafe" class="control-label">{title}</label>
<select id.bind="titleSafe" value.bind="value" class="form-control">
<option repeat.for="item of itemsSource" >
<!-- I want to insert my custom element here -->
</option>
</select>
</div>
<slot></slot>
</template>
以上是我的select-item自定义元素.然后我还会为可重复项的模板创建另一个自定义元素,比如select-item-template,我会像这样使用这两个:
<select-item title="myTitle" items-source="myItems">
<select-item-template><span>${myItemsProperty}</span></select-item-template>
</select-item>
这种方法的优势在于您可以使用一个默认槽创建复杂的"根"自定义元素.在这个插槽中,您可以定义多个自定义'子'元素,根元素在初始化时可以搜索(我知道您可以使用@child和@children装饰器执行此操作,以便覆盖该部分).我有点迷失在如何在我的根自定义元素中使用这些自定义子元素的内容但是.我将如何span在上面的示例中使用我的元素并准备它在转发器中呈现的内容？是否有可能将重复item设置为模板的数据源,因此我不必item在模板中指定？我希望我没有把它弄得太冗长,但我想解释一下我的功能要求是什么.如果你有任何资源可以指出我正确的方向,我将非常感激!
我试图验证使用Aurelia验证器选择了至少1个复选框.我假设使用minItems()方法就足够了,但似乎我只能通过使用指向我的数组的隐藏元素的'hack'来完成这项工作.有谁知道一个更简单的方法来处理这个？