Skip to content

T
todomvc
Commit d87b2b21 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

CanJS improvements 

- Single quotes
- Tabs
- Code style
- Remove all except jQuery one from site
- etc
parent 04a93033
Show whitespace changes
Inline Side-by-side
Showing with 103 additions and 123 deletions
index.html
View file @ d87b2b21
......@@ -157,6 +157,9 @@
<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 @@
<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>
......
labs/architecture-examples/canjs/css/app.css deleted 100644 → 0
View file @ 04a93033
.hidden {
display: none;
}
\ No newline at end of file
labs/architecture-examples/canjs/index.html
View file @ d87b2b21
......@@ -5,28 +5,23 @@
<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]-->
</head>
<body>
<section id="todoapp">
</section>
<div id="info">
<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>
</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>
labs/architecture-examples/canjs/js/app.js
View file @ d87b2b21
(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
});
});
});
})
})();
labs/architecture-examples/canjs/js/models/todo.js
View file @ d87b2b21
/*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,20 +17,21 @@
// 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();
}
});
......
labs/architecture-examples/canjs/js/todos/todos.js
View file @ d87b2b21
/*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();
......
labs/architecture-examples/canjs/todos.ejs
View file @ d87b2b21
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus="">
<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" : "" %>"
<%= 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>
<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") %>">
<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
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">
<a class="<%= state.attr('filter') === 'active' ? 'selected' : '' %>" href="#!active">
Active
</a>
</li>
<li>
<a class="<%= state.attr('filter') == 'completed' ? 'selected' : '' %>" href="#!completed">
<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" %>
completed item<%= todos.completed() === 1 ? '' : 's' %>
</button>
</footer>
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