Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updating to CanJS 1.1.0, adding Mustache views. Closes #330
- Loading branch information
1 parent
5ac3254
commit e19c80f
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,25 @@ | ||
| (function() { | ||
| $(function() { | ||
| // Set up a route that maps to the `filter` attribute | ||
| can.route( ':filter' ); | ||
| // Delay routing until we initialized everything | ||
| can.route.ready(false); | ||
|
|
||
| // View helper for pluralizing strings | ||
| Mustache.registerHelper('plural', function(str, count) { | ||
| return str + (count !== 1 ? 's' : ''); | ||
| }); | ||
|
|
||
| // Initialize the app | ||
| Models.Todo.findAll({}, function(todos) { | ||
| new Todos('#todoapp', { | ||
| todos: todos, | ||
| state : can.route, | ||
| view : 'views/todos.mustache' | ||
| }); | ||
| }); | ||
|
|
||
| // Now we can start routing | ||
| can.route.ready(true); | ||
| }); | ||
| })(); |
File renamed without changes.
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| # CanJS | ||
|
|
||
| CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides: | ||
|
|
||
| - *can.Model* - for connecting to RESTful JSON interfaces | ||
| - *can.View* - for template loading and caching | ||
| - *can.Observe* - for key-value binding | ||
| - *can.EJS* - live binding templates | ||
| - *can.Control* - declarative event bindings | ||
| - *can.route* - routing support | ||
|
|
||
| And works with jQuery, Zepto, YUI, Dojo and Mootools. | ||
|
|
||
| ## CanJS and JavaScriptMVC | ||
|
|
||
| *CanJS* is the extracted, more modern and more library-like MVC parts of [JavaScriptMVC](http://javascriptmvc.com) | ||
| (formerly known as *jQueryMX*). | ||
|
|
||
| *JavaScriptMVC 3.3* uses CanJS for the MVC structure so this TodoMVC example **applies to JavaScriptMVC** as well. | ||
| Additionally JavaScriptMVC contains: | ||
|
|
||
| - [CanJS](http://canjs.us) - For the MVC parts | ||
| - [jQuery++](http://jquerypp.com) - jQuery's missing utils and special events | ||
| - [StealJS](http://javascriptmvc.com/docs.html#!stealjs) - A JavaScript package manager | ||
| - [DocumentJS](http://javascriptmvc.com/docs.html#!DocumentJS) - A documentation engine | ||
| - [FuncUnit](http://funcunit.com) - jQuery style functional unit testing | ||
|
|
||
| ## View engines | ||
|
|
||
| CanJS supports both live binding [EJS](http://canjs.us/#can_ejs) and [Mustache/Handlebars](http://canjs.us/#can_mustache) | ||
| templates. By default the Mustache view will be used but an EJS example is available as well. | ||
| You can easily change it by modifying the `view` option in the `js/app.js` file: | ||
|
|
||
| Models.Todo.findAll({}, function(todos) { | ||
| new Todos('#todoapp', { | ||
| todos: todos, | ||
| state : can.route, | ||
| view : 'views/todos.ejs' | ||
| }); | ||
| }); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <header id="header"> | ||
| <h1>todos</h1> | ||
| <input id="new-todo" placeholder="What needs to be done?" autofocus> | ||
| </header> | ||
|
|
||
| <section id="main" class="<%= todos.attr("length") === 0 ? "hidden" : "" %>"> | ||
| <input id="toggle-all" type="checkbox" <%= todos.allComplete() ? "checked" : "" %>> | ||
| <label for="toggle-all">Mark all as complete</label> | ||
| <ul id="todo-list"> | ||
| <% todos.each(function( todo ) { %> | ||
| <li class="todo | ||
| <%= todo.matches(state.attr('filter')) ? '' : 'hidden' %> | ||
| <%= todo.attr('complete') ? 'completed' : '' %> | ||
| <%= todo.attr('editing') ? 'editing' : '' %>" | ||
| <%= (el)-> el.data('todo', todo) %>> | ||
| <div class="view"> | ||
| <input class="toggle" type="checkbox" <%= todo.attr('complete') ? 'checked' : '' %>> | ||
| <label><%= todo.attr('text') %></label> | ||
| <button class="destroy"></button> | ||
| </div> | ||
| <input class="edit" value="<%= todo.attr('text') %>"> | ||
| </li> | ||
| <% }) %> | ||
| </ul> | ||
| </section> | ||
| <footer id="footer" class="<%= todos.attr('length') === 0 ? 'hidden' : '' %>"> | ||
| <span id="todo-count"> | ||
| <strong><%= todos.remaining() %></strong> | ||
| item<%= todos.remaining() == 1 ? "" : "s" %> left | ||
| </span> | ||
| <ul id="filters"> | ||
| <li><a class="selected" href="#!">All</a></li> | ||
| <li><a href="#!active">Active</a></li> | ||
| <li><a href="#!completed">Completed</a></li> | ||
| </ul> | ||
| <button id="clear-completed" class="<%= todos.completed() === 0 ? 'hidden' : '' %>"> | ||
| Clear <%= todos.completed() %> | ||
| completed item<%= todos.completed() == 1 ? "" : "s" %> | ||
| </button> | ||
| </footer> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <header id="header"> | ||
| <h1>todos</h1> | ||
| <input id="new-todo" {{ (el) -> el.val('').focus() }} placeholder="What needs to be done?" autofocus=""> | ||
| </header> | ||
|
|
||
| <section id="main" class="{{^todos}}hidden{{/todos}}"> | ||
| <input id="toggle-all" type="checkbox" {{#todos.allComplete}}checked="checked"{{/todos.allComplete}}> | ||
| <label for="toggle-all" >Mark all as complete</label> | ||
| <ul id="todo-list"> | ||
| {{#todos}} | ||
| <li class="todo {{^matches}}hidden{{/matches}} {{#complete}}completed{{/complete}} {{#editing}}editing{{/editing}}" {{data 'todo'}}> | ||
| <div class="view"> | ||
| <input class="toggle" type="checkbox" {{#complete}}checked="checked"{{/complete}}> | ||
| <label>{{text}}</label> | ||
| <button class="destroy"></button> | ||
| </div> | ||
| <input class="edit" type="text" value="{{text}}"> | ||
| </li> | ||
| {{/todos}} | ||
| </ul> | ||
| </section> | ||
|
|
||
| <footer id="footer" class="{{^todos}}hidden{{/todos}}"> | ||
| <span id="todo-count"> | ||
| <strong>{{todos.remaining}}</strong> {{plural "item" todos.remaining}} left | ||
| </span> | ||
| <ul id="filters"> | ||
| <li> | ||
| <a class="selected" href="#!">All</a> | ||
| </li> | ||
| <li> | ||
| <a href="#!active">Active</a> | ||
| </li> | ||
| <li> | ||
| <a href="#!completed">Completed</a> | ||
| </li> | ||
| </ul> | ||
| <a href="#!" id="clear-completed" class="{{^todos.completed}}hidden{{/todos.completed}}"> | ||
| Clear {{todos.completed}} completed {{plural "item" todos.completed}} | ||
| </a> | ||
| </footer> |
I think this could be done all within the template.