Created
November 2, 2016 17:36
-
-
Save frank-dspeed/b646ac9eade9d0bd666e27f9a57409ea to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> | |
http://canjs.com/release/2.1.0/can.jquery.js | |
<script type="text/javascript"> | |
// Here's where we get, save, and delete to-dos. | |
// (Yep, this is all we need to access the Todo | |
// REST endpoints!) | |
var Todo = can.Model.extend({ | |
findAll: 'GET /todos', | |
findOne: 'GET /todos/{id}', | |
update: 'PUT /todos/{id}', | |
destroy: 'DELETE /todos/{id}' | |
}, {}); | |
// For this example, we're not actually going out to | |
// a REST endpoint, so we'll use fixtures to emulate that. | |
// Fixtures help you test your application when you | |
// don't have access to your REST services. | |
var TODOS = [ | |
'Download CanJS2', | |
'Download CanJS', | |
'Read the guides', | |
'Build your app', | |
'Become immortal2', | |
'Become immortal', | |
'Haircut @ 2pm' | |
]; | |
var todoStore = can.fixture.make(TODOS.length, function(i) { | |
return { | |
id: i + 1, | |
description: TODOS[i], | |
done: false | |
}; | |
}); | |
can.fixture({ | |
'GET /todos': todoStore.findAll, | |
'GET /todos/{id}': todoStore.findOne, | |
'PUT /todos/{id}': todoStore.update, | |
'DELETE /todos/{id}': todoStore.destroy | |
}); | |
// Let's drag this out a bit. | |
can.fixture.delay = 500; | |
can.Component.extend({ | |
tag: "todos-app", | |
scope: { | |
selectedTodo: null, | |
todos: new Todo.List({}), | |
select: function(todo) { | |
this.attr('selectedTodo', todo); | |
}, | |
saveTodo: function(todo) { | |
todo.save(); | |
this.removeAttr('selectedTodo'); | |
} | |
} | |
}) | |
// Start the application by rendering our template! | |
$("#content").html(can.view("appMustache", {})) | |
</script> | |
<div id="content"> | |
</div> | |
<script id='appMustache' type='text/mustache'> | |
<todos-app> | |
<h2>Todays to-dos</h2> {{#selectedTodo}} | |
<div id='editor'> | |
<input type='text' can-value='description' can-change="saveTodo" /> | |
</div> | |
{{/selectedTodo}} | |
<ul> | |
{{#each todos}} | |
<li> | |
<input type='checkbox' can-value='complete'> | |
<span class="description {{#if complete}}done{{/if}}" can-click='select'>{{description}}</span> | |
<button can-click="destroy"></button> | |
</li> | |
{{/each}} | |
</ul> | |
</todos-app> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment