Aurelia 介绍
Aurelia 是下一代的 JavaScript 客户端框架，利用一些简单便利的措施来加强你的创造力。
特性：
-
前瞻性：采用 ES6 和 ES7 编写，集成很多 Web 组件，无外部依赖
-
先进的架构
-
双路数据绑定
-
可扩展 HTML
-
路由和 UI 组件
-
MV* 模式
-
支持多种语言：ES 6&7、TypeScript、CoffeeScript 等
-
可测试
基础页面 index.html：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jspm_packages/github/twbs/bootstrap@3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body aurelia-app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.baseUrl = 'dist';
System.import('aurelia-bootstrapper').catch(console.error.bind(console));
</script>
</body>
</html>
app.js:
export class Welcome{
constructor(){
this.heading = 'Welcome to the Aurelia Navigation App!';
this.firstName = 'John';
this.lastName = 'Doe';
}
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
welcome(){
alert(`Welcome, ${this.fullName}!`);
}
}
app.html
<template>
<section>
<h2>${heading}</h2>
<form role="form" submit.delegate="welcome()">
<div class="form-group">
<label for="fn">First Name</label>
<input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
</div>
<div class="form-group">
<label for="ln">Last Name</label>
<input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
</div>
<div class="form-group">
<label>Full Name</label>
<p class="help-block">${fullName}</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</section>
</template>