Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

CanJS improvements

- Single quotes
- Tabs
- Code style
- Remove all except jQuery one from site
- etc
  • Loading branch information...
commit d87b2b214626d45aee199851e432c4f6c96819ab 1 parent 04a9303
@sindresorhus sindresorhus authored
View
24 index.html
@@ -157,6 +157,9 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
<div class="span12">
<h2>Labs</h2>
<ul class="applist">
+ <li class="routing">
+ <a href="labs/architecture-examples/canjs/" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). 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) and can.route (routing support).">CanJS</a>
+ </li>
<li>
<a href="labs/architecture-examples/maria/src/" data-source="https://github.com/petermichaux/maria" data-content="An MVC framework for JavaScript applications. The real MVC. The Smalltalk MVC. The Gang of Four MVC. The three core design patterns of MVC (observer, composite, and strategy) are embedded in Maria's Model, View, and Controller objects. Other patterns traditionally included in MVC implementations (e.g. factory method and template) make appearances too.">Maria</a>
</li>
@@ -241,27 +244,6 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
<li class="routing">
<a href="labs/architecture-examples/thorax" data-source="https://github.com/walmartlabs/thorax" data-content="Thorax is a Backbone superset that integrates deeply with Handlebars to provide easy model and collection binding.">Thorax</a>
</li>
- <li>
- <a href="labs/architecture-examples/canjs/dojo/" data-source="http://canjs.us" data-content="CanJS with Dojo. 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) and can.route (routing support).">CanJS (Dojo)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/dojo-widget/" data-source="http://canjs.us" data-content="CanJS with Dojo (includes a Dojo widget binding example). 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) and can.route (routing support).">CanJS (Dojo Widget)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/jquery/" data-source="http://canjs.us" data-content="CanJS with jQuery. 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) and can.route (routing support).">CanJS (jQuery)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/jquery-widget/" data-source="http://canjs.us" data-content="CanJS with jQuery (includes a jQuery UI widget binding example). 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) and can.route (routing support).">CanJS (jQuery Widget)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/mootools/" data-source="http://canjs.us" data-content="CanJS with Mootools. 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) and can.route (routing support).">CanJS (MooTools)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/yui/" data-source="http://canjs.us" data-content="CanJS with YUI. 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) and can.route (routing support).">CanJS (YUI)</a>
- </li>
- <li>
- <a href="labs/architecture-examples/canjs/yui-widget/" data-source="http://canjs.us" data-content="CanJS with YUI (includes a YUI widget binding example). 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) and can.route (routing support).">CanJS (YUI Widget)</a>
- </li>
<li class="routing">
<a href="labs/architecture-examples/dart/web/" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a>
</li>
View
3  labs/architecture-examples/canjs/css/app.css
@@ -1,3 +0,0 @@
-.hidden {
- display: none;
-}
View
45 labs/architecture-examples/canjs/index.html
@@ -1,32 +1,27 @@
<!doctype html>
<html lang="en">
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>CanJS • TodoMVC</title>
- <link rel="stylesheet" href="../../../assets/base.css">
- <link rel="stylesheet" href="css/app.css">
- <!--[if IE]>
- <script src="../../../assets/ie.js"></script>
- <![endif]-->
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>CanJS • TodoMVC</title>
+ <link rel="stylesheet" href="../../../assets/base.css">
+ <!--[if IE]>
+ <script src="../../../assets/ie.js"></script>
+ <![endif]-->
</head>
<body>
-<section id="todoapp">
-</section>
-<div id="info">
- <p>Double-click to edit a todo</p>
- <p>Written by <a href="http://bitovi.com">Bitovi</a></p>
- <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-</div>
-
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
-<script src="../../../assets/base.js"></script>
-
-<script src="js/lib/can.jquery-1.0.7.min.js"></script>
-<script src="js/lib/can-localstorage.min.js"></script>
-<script src="js/models/todo.js"></script>
-<script src="js/todos/todos.js"></script>
-<script src="js/app.js"></script>
-
+ <section id="todoapp"></section>
+ <div id="info">
+ <p>Double-click to edit a todo</p>
+ <p>Written by <a href="http://bitovi.com">Bitovi</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+ <script src="../../../assets/base.js"></script>
+ <script src="js/lib/can.jquery-1.0.7.min.js"></script>
+ <script src="js/lib/can-localstorage.min.js"></script>
+ <script src="js/models/todo.js"></script>
+ <script src="js/todos/todos.js"></script>
+ <script src="js/app.js"></script>
</body>
</html>
View
12 labs/architecture-examples/canjs/js/app.js
@@ -1,12 +1,12 @@
-(function () {
- $(function () {
+(function() {
+ $(function() {
can.route(':filter');
// Initialize the app
- Models.Todo.findAll({}, function (todos) {
+ Models.Todo.findAll({}, function(todos) {
new Todos('#todoapp', {
- todos : todos,
- state : can.route
+ todos: todos,
+ state: can.route
});
});
- })
+ });
})();
View
18 labs/architecture-examples/canjs/js/models/todo.js
@@ -1,12 +1,15 @@
+/*global can */
(function (namespace, undefined) {
+ 'use strict';
+
// Basic Todo entry model
// { text: 'todo', complete: false }
var Todo = can.Model.LocalStorage({
- storageName : 'todos-canjs'
+ storageName: 'todos-canjs'
}, {
// Returns if this instance matches a given filter
// (currently `active` and `complete`)
- matches : function (filter) {
+ matches: function(filter) {
return !filter || (filter === 'active' && !this.attr('complete'))
|| (filter === 'completed' && this.attr('complete'));
}
@@ -14,24 +17,25 @@
// List for Todos
Todo.List = can.Model.List({
- completed : function () {
+ completed: function() {
var completed = 0;
- this.each(function (todo) {
+
+ this.each(function(todo) {
completed += todo.attr('complete') ? 1 : 0;
});
return completed;
},
- remaining : function () {
+ remaining: function() {
return this.attr('length') - this.completed();
},
- allComplete : function () {
+ allComplete: function() {
return this.attr('length') === this.completed();
}
});
namespace.Models = namespace.Models || {};
namespace.Models.Todo = Todo;
-})(this);
+})(this);
View
40 labs/architecture-examples/canjs/js/todos/todos.js
@@ -1,8 +1,12 @@
+/*global can, Models, $ */
(function (namespace, undefined) {
+ 'use strict';
+
+ var ENTER_KEY = 13;
var Todos = can.Control({
// Initialize the Todos list
- init : function () {
+ init: function() {
// Render the Todos
this.element.append(can.view('todos.ejs', this.options));
@@ -11,9 +15,9 @@
},
// Listen for when a new Todo has been entered
- '#new-todo keyup' : function (el, ev) {
+ '#new-todo keyup': function(el, e) {
var value = can.trim(el.val());
- if (ev.keyCode == 13 && value !== '') {
+ if (e.keyCode === ENTER_KEY && value !== '') {
new Models.Todo({
text : value,
complete : false
@@ -24,25 +28,25 @@
},
// Handle a newly created Todo
- '{Models.Todo} created' : function (list, ev, item) {
+ '{Models.Todo} created': function(list, e, item) {
this.options.todos.push(item);
// Reset the filter so that you always see your new todo
- this.options.state.removeAttr('filter')
+ this.options.state.removeAttr('filter');
},
// Listen for editing a Todo
- '.todo dblclick' : function (el, ev) {
- el.data('todo').attr('editing', true).save(function () {
+ '.todo dblclick': function(el) {
+ el.data('todo').attr('editing', true).save(function() {
el.children('.edit').focus();
});
},
// Update a todo
- updateTodo : function (el) {
+ updateTodo: function(el) {
var value = can.trim(el.val()),
todo = el.closest('.todo').data('todo');
- if (value == '') {
+ if (value === '') {
todo.destroy();
} else {
todo.attr({
@@ -53,37 +57,37 @@
},
// Listen for an edited Todo
- '.todo .edit keyup' : function (el, ev) {
- if (ev.keyCode == 13) {
+ '.todo .edit keyup': function(el, e) {
+ if (e.keyCode === ENTER_KEY) {
this.updateTodo(el);
}
},
- '.todo .edit focusout' : function (el, ev) {
+ '.todo .edit focusout': function(el) {
this.updateTodo(el);
},
// Listen for the toggled completion of a Todo
- '.todo .toggle click' : function (el, ev) {
+ '.todo .toggle click': function(el) {
el.closest('.todo').data('todo')
.attr('complete', el.is(':checked'))
.save();
},
// Listen for a removed Todo
- '.todo .destroy click' : function (el) {
+ '.todo .destroy click': function(el) {
el.closest('.todo').data('todo').destroy();
},
// Listen for toggle all completed Todos
- '#toggle-all click' : function (el, ev) {
+ '#toggle-all click': function (el) {
var toggle = el.prop('checked');
- can.each(this.options.todos, function (todo) {
+ can.each(this.options.todos, function(todo) {
todo.attr('complete', toggle).save();
});
},
// Listen for removing all completed Todos
- '#clear-completed click' : function () {
+ '#clear-completed click': function() {
for (var i = this.options.todos.length - 1, todo; i > -1 && (todo = this.options.todos[i]); i--) {
if (todo.attr('complete')) {
todo.destroy();
@@ -95,4 +99,4 @@
});
namespace.Todos = Todos;
-})(this);
+})(this);
View
84 labs/architecture-examples/canjs/todos.ejs
@@ -1,51 +1,49 @@
<header id="header">
- <h1>todos</h1>
- <input id="new-todo" placeholder="What needs to be done?" autofocus="">
+ <h1>todos</h1>
+ <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
-
-<section id="main" class="<%= todos.attr("length") > 0 ? "show" : "" %>">
-<input id="toggle-all" type="checkbox" <%= todos.allComplete() ? "checked" : "" %>>
+<section id="main" class="<%= todos.attr("length") > 0 ? 'show' : '' %>">
+<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" type="text" value="<%= todo.attr("text") %>">
- </li>
- <% }) %>
+ <% 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="<%= !state.attr('filter') ? 'selected' : '' %>" href="#!">All</a>
- </li>
- <li>
- <a class="<%= state.attr('filter') == 'active' ? 'selected' : '' %>" href="#!active">
- Active
- </a>
- </li>
- <li>
- <a class="<%= state.attr('filter') == 'completed' ? 'selected' : '' %>" 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>
+ <span id="todo-count">
+ <strong><%= todos.remaining() %></strong>
+ item<%= todos.remaining() == 1 ? '' : 's' %> left
+ </span>
+ <ul id="filters">
+ <li>
+ <a class="<%= !state.attr('filter') ? 'selected' : '' %>" href="#!">All</a>
+ </li>
+ <li>
+ <a class="<%= state.attr('filter') === 'active' ? 'selected' : '' %>" href="#!active">
+ Active
+ </a>
+ </li>
+ <li>
+ <a class="<%= state.attr('filter') === 'completed' ? 'selected' : '' %>" 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>
Please sign in to comment.
Something went wrong with that request. Please try again.