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