这篇打字稿博客文章评论部分的帖子之一说:
如果我必须等到2.0以获得ES6发电机支持,我就会坚持使用Traceur.生成器是一个大问题,他们今天使用Koa,Co,Bluebird等库为您提供异步/等待支持.
Async/await关键字将允许应用程序保留类似于同步代码的逻辑结构.如何使用发电机来完成类似的事情呢？例如,如何将生成器与ajax调用结合使用以生成避免使用回调的同步样式代码？
我的Aurelia应用程序中有两条路线,一个列表(工作)和一个细节(WorkDetail).
在导航中,我只有列表路径:
Home | *Work* | Contact | . . .
当我导航到WorkDetail视图时,我想在导航中将工作路线设置为活动状态.
到目前为止我尝试过的是activate()在WorkDetail视图的回调中激活路由并在deactivate()以下时间处于非活动状态:
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class WorkDetail {
constructor(router) {
this.workRoute = router.routes[2].navModel;
};
activate(params, routeConfig, navigationInstruction) {
this.workRoute.isActive = true;
};
deactivate() {
this.workRoute.isActive = false;
};
}
我遇到的问题是,在第一次激活时,"工作"导航项不会显示为"活动".如果我导航到另一个WorkItem,它将被设置为"活动".
为什么该导航项仅在后续导航操作中设置为活动状态？或者,有没有更好的方法将父/相关导航项设置为"活动"？
如果你有兴趣,这是我的app.js:https://gist.github.com/alsoicode/37c5699f29c7562d2bf5
我正在Aurelia写一个非常简单的数据网格自定义元素,部分用于我需要的功能,部分用于学习Aurelia.它进展顺利,但我仍然坚持如何获取自定义组件中元素的内容.
这是我的代码,问题的其余部分如下:
数据grid.js
import {inject, bindable} from 'aurelia-framework';
import _ from 'underscore';
export class DataGridCustomElement {
@bindable data = [];
@bindable height = '';
columns = [];
bind() {
this.sort(this.columns[0].property);
}
sort(property) {
if (property == this.sortProperty) {
this.sortDirection = !this.sortDirection;
}
else {
this.sortProperty = property;
this.sortDirection = true;
}
let data = _.sortBy(this.data, this.sortProperty);
if (!this.sortDirection) {
data = data.reverse()
}
this.data = data;
}
}
@inject(DataGridCustomElement)
export class DataGridColumnCustomElement {
@bindable title = '';
@bindable width = …我正在尝试在Aurelia中设置某些逻辑,这些逻辑会影响由repeat.for循环的DOM节点.如果我正确理解文档,那么视图的附加()回调在DOM渲染之后被调用,并且是放置这种逻辑的地方.
问题是attach()回调似乎在repeat.for绑定完成之前被触发,只留下部分渲染的dom.
为了说明问题:
我有一个自定义元素包含:
<template>
<ul>
<li repeat.for="thing of things"></li>
</ul>
</template>
一旦调用了attach(),我希望有一个包含所有li元素的渲染DOM.简单地转储dom显示为空
如何实现一个可以访问那些li节点的回调？
希望有人可以帮助我.我有以下观点:
<label repeat.for="option of options">
<input type="radio" name="periodOptions" model.bind="option" checked.bind="$parent.selectedOption" click.delegate="clicked()"/>
${option.text}
</label>
和以下viewmodel:
export class PeriodPanel {
heading = 'Tidsperiode';
options = [];
selectedOption = {};
constructor() {
this.options = [
{id:1, text:'Vis med dagoppløsning'},
{id:2, text:'Vis med timeoppløsning'},
{id:3, text:'Vis periode'}
];
this.selectedOption = this.options[0];
}
clicked() {
console.log(this.selectedOption.id);
}
}
分配的原因this.selectedOption = this.options[0];是确保最初设置了一个单选按钮.这很好看,但是当我依次点击每个单选按钮时,selectedOption变量的值不会改变,click-handler clicked()将每次打印值1.我究竟做错了什么？
TIA
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的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 …在完成开始教程时,有一个"需要"引导库(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. …在Angular 2您可以创建本地模板变量更容易地访问HTML元素.
<input #name type="text">
<button (click)="submit(name.value)">Submit</button>
在Aurelia有相同的功能吗？
javascript ×10
aurelia ×8
angular ×1
async-await ×1
ecmascript-6 ×1
generator ×1
html ×1
materialize ×1
svg ×1
templates ×1
typescript ×1