Skip to content

T
todomvc
Commit 6ffb10f1 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Aurelia - tab indentation and other minor tweaks

parent 52bceed7
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 79 deletions
examples/aurelia/README.md
View file @ 6ffb10f1
......@@ -2,6 +2,7 @@
> *Aurelia* is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.
## Local Installation
Requirements:
......@@ -12,20 +13,29 @@ Requirements:
Clone the repository:
git clone https://github.com/mhoyer/todomvc-aurelia
```
$ git clone https://github.com/mhoyer/todomvc-aurelia
```
Install jspm and npm packages:
npm install
jspm install
```
$ npm install
$ jspm install
```
Simply build, test, bundle, export:
gulp
```
$ gulp
```
Run tests and HTTP-server:
gulp watch
```
$ gulp watch
```
## Resources
......@@ -41,6 +51,7 @@ Run tests and HTTP-server:
*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
## Implementation
- Following the getting started tutorial: http://aurelia.io/get-started.html
......@@ -57,6 +68,7 @@ Run tests and HTTP-server:
- See [Issues](https://github.com/mhoyer/todomvc-aurelia/issues/)
## Credit
Created by [Marcel Hoyer](http://marcelhoyer.de)
examples/aurelia/dist/app.html
View file @ 6ffb10f1
<template>
<router-view></router-view>
<router-view></router-view>
</template>
examples/aurelia/dist/todos.html
View file @ 6ffb10f1
<template>
<import from="behaviors/focus"></import>
<header id="header">
<h1>todos</h1>
<form role="form" submit.delegate="addNewTodo(newTodoTitle)">
<input id="new-todo" value.bind="newTodoTitle" placeholder="What needs to be done?" autofocus>
</form>
</header>
<section id="main" show.bind="items.length">
<input id="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="areAllCheckedChanged()">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
<div class="view">
<input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
<label click.delegate="todoItem.labelClicked()">${todoItem.title}</label>
<button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
</div>
<form role="form" submit.delegate="todoItem.finishEditing()">
<input class="edit" value.bind="todoItem.editTitle"
blur.delegate="todoItem.finishEditing()"
keyup.delegate="todoItem.onKeyUp($event)"
focus.bind="todoItem.isEditing">
</form>
</li>
</ul>
</section>
<footer id="footer" show.bind="items.length">
<span id="todo-count">
<strong>${countTodosLeft}</strong>
${countTodosLeft == 1 ? 'item' : 'items'} left</span>
<ul id="filters">
<li>
<a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
</li>
<li>
<a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
</li>
<li>
<a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length"></button>
</footer>
<import from="behaviors/focus"></import>
<header id="header">
<h1>todos</h1>
<form role="form" submit.delegate="addNewTodo(newTodoTitle)">
<input id="new-todo" value.bind="newTodoTitle" placeholder="What needs to be done?" autofocus>
</form>
</header>
<section id="main" show.bind="items.length">
<input id="toggle-all" type="checkbox" checked.bind="areAllChecked" change.delegate="areAllCheckedChanged()">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li repeat.for="todoItem of filteredItems" class="${todoItem.isCompleted ? 'completed' : ''} ${todoItem.isEditing ? 'editing' : ''}">
<div class="view">
<input class="toggle" type="checkbox" checked.bind="todoItem.isCompleted">
<label click.delegate="todoItem.labelClicked()">${todoItem.title}</label>
<button click.delegate="$parent.deleteTodo(todoItem)" class="destroy"></button>
</div>
<form role="form" submit.delegate="todoItem.finishEditing()">
<input class="edit" value.bind="todoItem.editTitle"
blur.delegate="todoItem.finishEditing()"
keyup.delegate="todoItem.onKeyUp($event)"
focus.bind="todoItem.isEditing">
</form>
</li>
</ul>
</section>
<footer id="footer" show.bind="items.length">
<span id="todo-count">
<strong>${countTodosLeft}</strong>
${countTodosLeft == 1 ? 'item' : 'items'} left</span>
<ul id="filters">
<li>
<a class="${filter == '!' ? 'selected' : ''}" href="#!/">All</a>
</li>
<li>
<a class="${filter == 'active' ? 'selected' : ''}" href="#/active">Active</a>
</li>
<li>
<a class="${filter == 'completed' ? 'selected' : ''}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" click.delegate="clearCompletedTodos()" show.bind="countTodosLeft < items.length"></button>
</footer>
</template>
examples/aurelia/index.html
View file @ 6ffb10f1
<!doctype html>
<html lang="en" data-framework="aurelia">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelia • TodoMVC</title>
<link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-common@1.0.1/base.css">
<link rel="stylesheet" type="text/css" href="jspm_packages/npm/todomvc-app-css@1.0.1/index.css">
</head>
<body>
<section id="todoapp" aurelia-app>
<!-- this is where Aurelia will fill out the content -->
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="jspm_packages/npm/todomvc-common@1.0.1/base.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.baseUrl = 'dist';
System.import('aurelia-bootstrapper');
</script>
</body>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelia • TodoMVC</title>
<link rel="stylesheet" href="jspm_packages/npm/todomvc-common@1.0.1/base.css">
<link rel="stylesheet" href="jspm_packages/npm/todomvc-app-css@1.0.1/index.css">
</head>
<body>
<section id="todoapp" aurelia-app>
<!-- this is where Aurelia will fill out the content -->
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://marcelhoyer.de">Marcel Hoyer</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="jspm_packages/npm/todomvc-common@1.0.1/base.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.baseUrl = 'dist';
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7