Skip to content

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

Somajs: Some whitespace, code style and readme cleanup

parent f189c265
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 55 deletions
labs/architecture-examples/somajs/README.md
View file @ 0d3d8af4
# [soma.js](http://somajs.github.com/somajs) • [TodoMVC](http://todomvc.com)
# soma.js TodoMVC app
soma.js is a javascript model-view-controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.
[soma.js](http://somajs.github.com/somajs) is a JavaScript Model-View-Controller (MVC) framework that is meant to help developers to write loosely-coupled applications to increase scalability and maintainability.
The main idea behind the MVC pattern is to separate the data (model), the user interface (view) and the logic of the application (controller). They must be independent and should not know about each other in order to increase the scalability of the application.
......@@ -8,4 +8,6 @@ soma.js is providing tools to make the three parts "talk" to each other, keeping
## Credits
Created by [Romuald Quantin](http://www.soundstep.com) using [soma.js](http://somajs.github.com/somajs)
Created by [Romuald Quantin](http://soundstep.com)
Part of [TodoMVC](http://todomvc.com)
\ No newline at end of file
labs/architecture-examples/somajs/index.html
View file @ 0d3d8af4
......@@ -6,11 +6,10 @@
<title>soma.js • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css">
<!--[if IE]>
<script src="../assets/ie.js"></script>
<script src="../../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
......@@ -27,10 +26,9 @@
<p>Double-click to edit a todo</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<p>Created by <a href="http://soundstep.com">Romuald Quantin</a></p>
<p>With <a href="http://somajs.github.com/somajs/">soma.js</a></p>
<p>With <a href="http://somajs.github.com/somajs">soma.js</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script id="todo-list-template" type="text/x-handlebars-template">
{{#this}}
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
......@@ -43,12 +41,10 @@
</li>
{{/this}}
</script>
<script id="footer-template" type="text/x-handlebars-template">
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
<button id="clear-completed">Clear completed ({{completed}})</button>
</script>
<script src="../../../assets/base.js"></script>
<script src="../../../assets/handlebars.min.js"></script>
<script src="../../../assets/jquery.min.js"></script>
......@@ -57,6 +53,5 @@
<script src="js/todos/views/views.js"></script>
<script src="js/todos/controllers/controllers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/somajs/js/app.js
View file @ 0d3d8af4
var todo = window.todo || {};
(function( window ) {
'use strict';
todo.TodoApp = new soma.Application.extend({
......
labs/architecture-examples/somajs/js/todos/controllers/controllers.js
View file @ 0d3d8af4
var todo = window.todo || {};
(function( window ) {
'use strict';
todo.TodoCommand = soma.Command.extend({
execute: function( event ) {
var model = this.getModel( todo.TodoModel.NAME );
switch( event.type ) {
......@@ -36,8 +34,7 @@ var todo = window.todo || {};
}
});
todo.TodoEvent = soma.Event.extend( {
todo.TodoEvent = soma.Event.extend({
constructor: function( type, todoTitle, todoId, toggleAll ) {
return soma.Event.call( this, type, {
todoTitle: todoTitle,
......@@ -45,8 +42,7 @@ var todo = window.todo || {};
toggleAll: toggleAll
});
}
} );
});
todo.TodoEvent.RENDER = 'TodoEvent.RENDER';
todo.TodoEvent.CREATE = 'TodoEvent.CREATE';
......
labs/architecture-examples/somajs/js/todos/models/models.js
View file @ 0d3d8af4
var todo = window.todo || {};
(function( window ) {
'use strict';
todo.TodoModel = new soma.Model.extend({
dataFooter: null,
init: function() {
......@@ -50,38 +48,49 @@ var todo = window.todo || {};
},
toggleAll: function( toggleValue ) {
for (var i = 0; i < this.data.length; i++) {
var i;
for ( i = 0; i < this.data.length; i++ ) {
this.data[i].completed = toggleValue;
}
this.update();
},
clearCompleted: function() {
var i = this.data.length;
while( i-- ) {
if ( this.data[i].completed ) {
while ( i-- ) {
if ( this.data[ i ].completed ) {
this.data.splice( i, 1 );
}
}
this.update();
},
getIndexById: function( id ) {
for ( var i = 0; i < this.data.length; i++ ) {
if ( this.data[i].id === id ) {
var i;
for ( i = 0; i < this.data.length; i++ ) {
if ( this.data[ i ].id === id ) {
return i;
}
}
return -1;
},
getActiveLength: function() {
var count = 0;
for ( var i = 0; i < this.data.length; i++ ) {
if ( !this.data[i].completed ) {
var i,
count = 0;
for ( i = 0; i < this.data.length; i++ ) {
if ( !this.data[ i ].completed ) {
count++;
}
}
return count;
},
......
labs/architecture-examples/somajs/js/todos/views/views.js
View file @ 0d3d8af4
var todo = window.todo || {};
(function( window ) {
'use strict';
var ENTER_KEY = 13;
todo.TodoListView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $('#' + this.domElement.id + '-template').html() );
$(this.domElement).on( 'click', '.destroy', this.destroy.bind(this) );
$(this.domElement).on( 'click', '.toggle', this.toggle.bind(this) );
$(this.domElement).on( 'dblclick', '.view', this.edit );
$(this.domElement).on( 'blur', '.edit', this.update.bind(this) );
$(this.domElement).on( 'keypress', '.edit', this.blurInput );
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '.destroy', this.destroy.bind( this ) );
$( this.domElement ).on( 'click', '.toggle', this.toggle.bind( this ) );
$( this.domElement ).on( 'dblclick', '.view', this.edit );
$( this.domElement ).on( 'blur', '.edit', this.update.bind( this ) );
$( this.domElement ).on( 'keypress', '.edit', this.blurInput );
$('#toggle-all').click( this.toggleAll );
},
......@@ -37,17 +35,18 @@ var todo = window.todo || {};
},
toggleAll: function() {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE_ALL, null, null, $(this).prop('checked') ) );
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE_ALL, null, null, $( this ).prop('checked') ) );
},
edit: function( event ) {
$(this).closest('li').addClass('editing').find('.edit').select();
$( this ).closest('li').addClass('editing').find('.edit').select();
},
update: function( event ) {
var li = $(event.target).closest('li').removeClass('editing');
var id = li.attr('data-id');
var val = li.find('.edit').val().trim();
var li = $( event.target ).closest('li').removeClass('editing'),
id = li.data('id'),
val = li.find('.edit').val().trim();
if ( val ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.UPDATE, val, id ) );
}
......@@ -57,11 +56,10 @@ var todo = window.todo || {};
},
blurInput: function( event ) {
if (event.which === ENTER_KEY) {
if ( event.which === ENTER_KEY ) {
event.target.blur();
}
}
});
todo.TodoListView.NAME = 'TodoListView';
......@@ -69,26 +67,28 @@ var todo = window.todo || {};
todo.TodoInputView = soma.View.extend({
init: function() {
$(this.domElement).keypress( this.keyPressHandler.bind(this) );
$(this.domElement).blur( this.blur );
$( this.domElement ).keypress( this.keyPressHandler.bind( this ) );
$( this.domElement ).blur( this.blur );
},
keyPressHandler: function( event ) {
if (event.which === ENTER_KEY) {
if ( event.which === ENTER_KEY ) {
this.createItem();
}
},
createItem: function() {
var value = this.domElement.value.trim();
if (value) {
if ( value ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CREATE, value ) );
}
this.domElement.value = '';
},
blur: function( event ) {
if (!this.value.trim()) {
if ( !this.value.trim() ) {
this.value = '';
}
}
......@@ -98,24 +98,22 @@ var todo = window.todo || {};
todo.TodoInputView.NAME = 'TodoInputView';
todo.FooterView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $('#' + this.domElement.id + '-template').html() );
$(this.domElement).on( 'click', '#clear-completed', this.clearCompleted.bind(this) );
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '#clear-completed', this.clearCompleted.bind( this ) );
},
render: function( data ) {
$(this.domElement).html( this.template( data ) );
$(this.domElement).toggle( !!data.length );
$( this.domElement ).html( this.template( data ) );
$( this.domElement ).toggle( !!data.length );
$('#clear-completed').toggle( !!data.completed );
},
clearCompleted: function(event) {
clearCompleted: function( event ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CLEAR_COMPLETED ) );
}
});
todo.FooterView.NAME = 'FooterView';
......
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