You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
5.0 KiB
131 lines
5.0 KiB
<!DOCTYPE html>
|
|
<html class="no-js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>todomvc on hoodie</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/vendor/prism/prism.css">
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="hero-unit">
|
|
<h1>todomvc on hoodie</h1>
|
|
<p>
|
|
Implementations of the hoodie store using Backbone.js, Ember.js, AngularJS, and many more.
|
|
<p>
|
|
|
|
<p>Start out at <a href="/architecture-examples/">/architecture-examples/</a></p>
|
|
|
|
<p>Examples have been forked from <a href="https://github.com/tastejs/todomvc/">tastejs/todomvc</a>.</p>
|
|
|
|
<div class="hoodie-accountbar">
|
|
|
|
<div class="hoodie-account-signedout">
|
|
<span class="btn-group">
|
|
<button class="btn btn-small btn-inverse" data-hoodie-action="signup">Sign Up</button>
|
|
<button class="btn btn-small dropdown-toggle btn-inverse" data-toggle="dropdown">
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li><a href="#" data-hoodie-action="signin">Sign In</a></li>
|
|
<li><a href="#" data-hoodie-action="resetpassword">Reset Password</a></li>
|
|
<li><a href="#" data-hoodie-action="destroy">Clear local data</a></li>
|
|
</ul>
|
|
</span>
|
|
</div><!-- /.hoodie-account-signedout -->
|
|
|
|
<div class="hoodie-account-signedin">
|
|
Hello,
|
|
<span class="hoodie-username"><!-- usern name will be filled in here --></span>
|
|
<span class="btn-group">
|
|
<button class="btn btn-small btn-inverse" data-hoodie-action="signout">Sign Out</button>
|
|
<button class="btn btn-small dropdown-toggle btn-inverse" data-toggle="dropdown">
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li><a href="#" data-hoodie-action="changepassword">Change Password</a></li>
|
|
<li><a href="#" data-hoodie-action="changeusername">Change Username</a></li>
|
|
<li><a href="#" data-hoodie-action="destroy">Destroy Account</a></li>
|
|
</ul>
|
|
</span>
|
|
</div><!-- /.hoodie-account-signedin -->
|
|
|
|
<div class="hoodie-account-error">
|
|
Hello,
|
|
<span class="hoodie-username"><!-- username will be filled in here --></span>.
|
|
<span class="btn-group">
|
|
<button class="btn btn-small btn-danger" data-hoodie-action="signin">Authentication error: Sign in again</button>
|
|
<button class="btn btn-small dropdown-toggle btn-danger" data-toggle="dropdown">
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li><a href="#" data-hoodie-action="signout">Sign out</a></li>
|
|
</ul>
|
|
</span>
|
|
</div><!-- /.hoodie-account-error -->
|
|
</div><!--/hoodieAccountBar -->
|
|
</div>
|
|
|
|
<div class="content">
|
|
This is the minimalistic an pure hood.ie implementation.
|
|
<ul id="todolist"></ul>
|
|
|
|
<input type="text" id="todoinput" placeholder="new todo ↵" />
|
|
</div>
|
|
|
|
<div class="code">
|
|
<pre class="language-javascript"><code class="language-javascript">
|
|
// initialize Hoodie
|
|
var hoodie = new Hoodie()
|
|
|
|
// initial load of all todo items from the store
|
|
hoodie.store.findAll('todo').then( function(todos) {
|
|
todos.sort( sortByCreatedAt ).forEach( addTodo )
|
|
})
|
|
|
|
// when a new todo gets stored, add it to the UI
|
|
hoodie.store.on('add:todo', addTodo)
|
|
// when a user signs out, clear the todo list
|
|
hoodie.account.on('signout', clearTodos)
|
|
|
|
// handle creating a new task
|
|
$('#todoinput').on('keypress', function(event) {
|
|
if (event.keyCode == 13) { // ENTER
|
|
hoodie.store.add('todo', {title: event.target.value});
|
|
event.target.value = '';
|
|
}
|
|
})
|
|
|
|
function addTodo( todo ) {
|
|
$('#todolist').append('<li>'+todo.title+'</li>');
|
|
}
|
|
function clearTodos() {
|
|
$('#todolist').html('');
|
|
}
|
|
function sortByCreatedAt(a, b) {
|
|
return a.createdAt > b.createdAt
|
|
}
|
|
</code></pre>
|
|
</div><!-- /.code -->
|
|
|
|
<footer class="copy">
|
|
<p>♥ hood.ie 2014</p>
|
|
</footer>
|
|
</div> <!-- /.container -->
|
|
|
|
<script src="assets/vendor/jquery-2.1.0.min.js"></script>
|
|
<script src="assets/vendor/bootstrap/bootstrap.js"></script>
|
|
<script src="assets/vendor/prism/prism.js"></script>
|
|
<!-- Load the dynamic version of hoodie.js that includes all the plugin code-->
|
|
<script src="/_api/_files/hoodie.js"></script>
|
|
|
|
<script src="assets/vendor/hoodie.accountbar.bootstrap.js"></script>
|
|
<script src="assets/vendor/bootstrap.modalform.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|
|
|