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
Hide 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. 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 ...@@ -8,4 +8,6 @@ soma.js is providing tools to make the three parts "talk" to each other, keeping
## Credits ## 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 @@ ...@@ -6,11 +6,10 @@
<title>soma.js • TodoMVC</title> <title>soma.js • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.css"> <link rel="stylesheet" href="../../../assets/base.css">
<!--[if IE]> <!--[if IE]>
<script src="../assets/ie.js"></script> <script src="../../../assets/ie.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
...@@ -27,10 +26,9 @@ ...@@ -27,10 +26,9 @@
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></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>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> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
<script id="todo-list-template" type="text/x-handlebars-template"> <script id="todo-list-template" type="text/x-handlebars-template">
{{#this}} {{#this}}
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}"> <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
...@@ -43,12 +41,10 @@ ...@@ -43,12 +41,10 @@
</li> </li>
{{/this}} {{/this}}
</script> </script>
<script id="footer-template" type="text/x-handlebars-template"> <script id="footer-template" type="text/x-handlebars-template">
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span> <span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
<button id="clear-completed">Clear completed ({{completed}})</button> <button id="clear-completed">Clear completed ({{completed}})</button>
</script> </script>
<script src="../../../assets/base.js"></script> <script src="../../../assets/base.js"></script>
<script src="../../../assets/handlebars.min.js"></script> <script src="../../../assets/handlebars.min.js"></script>
<script src="../../../assets/jquery.min.js"></script> <script src="../../../assets/jquery.min.js"></script>
...@@ -57,6 +53,5 @@ ...@@ -57,6 +53,5 @@
<script src="js/todos/views/views.js"></script> <script src="js/todos/views/views.js"></script>
<script src="js/todos/controllers/controllers.js"></script> <script src="js/todos/controllers/controllers.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
labs/architecture-examples/somajs/js/app.js
View file @ 0d3d8af4
var todo = window.todo || {}; var todo = window.todo || {};
(function( window ) { (function( window ) {
'use strict'; 'use strict';
todo.TodoApp = new soma.Application.extend({ todo.TodoApp = new soma.Application.extend({
...@@ -31,4 +30,4 @@ var todo = window.todo || {}; ...@@ -31,4 +30,4 @@ var todo = window.todo || {};
var app = new todo.TodoApp(); var app = new todo.TodoApp();
})( window ); })( window );
\ No newline at end of file
labs/architecture-examples/somajs/js/todos/controllers/controllers.js
View file @ 0d3d8af4
var todo = window.todo || {}; var todo = window.todo || {};
(function( window ) { (function( window ) {
'use strict'; 'use strict';
todo.TodoCommand = soma.Command.extend({ todo.TodoCommand = soma.Command.extend({
execute: function( event ) { execute: function( event ) {
var model = this.getModel( todo.TodoModel.NAME ); var model = this.getModel( todo.TodoModel.NAME );
switch( event.type ) { switch( event.type ) {
...@@ -36,8 +34,7 @@ var todo = window.todo || {}; ...@@ -36,8 +34,7 @@ var todo = window.todo || {};
} }
}); });
todo.TodoEvent = soma.Event.extend( { todo.TodoEvent = soma.Event.extend({
constructor: function( type, todoTitle, todoId, toggleAll ) { constructor: function( type, todoTitle, todoId, toggleAll ) {
return soma.Event.call( this, type, { return soma.Event.call( this, type, {
todoTitle: todoTitle, todoTitle: todoTitle,
...@@ -45,8 +42,7 @@ var todo = window.todo || {}; ...@@ -45,8 +42,7 @@ var todo = window.todo || {};
toggleAll: toggleAll toggleAll: toggleAll
}); });
} }
});
} );
todo.TodoEvent.RENDER = 'TodoEvent.RENDER'; todo.TodoEvent.RENDER = 'TodoEvent.RENDER';
todo.TodoEvent.CREATE = 'TodoEvent.CREATE'; todo.TodoEvent.CREATE = 'TodoEvent.CREATE';
......
labs/architecture-examples/somajs/js/todos/models/models.js
View file @ 0d3d8af4
var todo = window.todo || {}; var todo = window.todo || {};
(function( window ) { (function( window ) {
'use strict'; 'use strict';
todo.TodoModel = new soma.Model.extend({ todo.TodoModel = new soma.Model.extend({
dataFooter: null, dataFooter: null,
init: function() { init: function() {
...@@ -50,38 +48,49 @@ var todo = window.todo || {}; ...@@ -50,38 +48,49 @@ var todo = window.todo || {};
}, },
toggleAll: function( toggleValue ) { 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.data[i].completed = toggleValue;
} }
this.update(); this.update();
}, },
clearCompleted: function() { clearCompleted: function() {
var i = this.data.length; 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.data.splice( i, 1 );
} }
} }
this.update(); this.update();
}, },
getIndexById: function( id ) { getIndexById: function( id ) {
for ( var i = 0; i < this.data.length; i++ ) { var i;
if ( this.data[i].id === id ) {
for ( i = 0; i < this.data.length; i++ ) {
if ( this.data[ i ].id === id ) {
return i; return i;
} }
} }
return -1; return -1;
}, },
getActiveLength: function() { getActiveLength: function() {
var count = 0; var i,
for ( var i = 0; i < this.data.length; i++ ) { count = 0;
if ( !this.data[i].completed ) {
for ( i = 0; i < this.data.length; i++ ) {
if ( !this.data[ i ].completed ) {
count++; count++;
} }
} }
return count; return count;
}, },
......
labs/architecture-examples/somajs/js/todos/views/views.js
View file @ 0d3d8af4
var todo = window.todo || {}; var todo = window.todo || {};
(function( window ) { (function( window ) {
'use strict'; 'use strict';
var ENTER_KEY = 13; var ENTER_KEY = 13;
todo.TodoListView = soma.View.extend({ todo.TodoListView = soma.View.extend({
template: null, template: null,
init: function() { init: function() {
this.template = Handlebars.compile( $('#' + this.domElement.id + '-template').html() ); this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$(this.domElement).on( 'click', '.destroy', this.destroy.bind(this) ); $( this.domElement ).on( 'click', '.destroy', this.destroy.bind( this ) );
$(this.domElement).on( 'click', '.toggle', this.toggle.bind(this) ); $( this.domElement ).on( 'click', '.toggle', this.toggle.bind( this ) );
$(this.domElement).on( 'dblclick', '.view', this.edit ); $( this.domElement ).on( 'dblclick', '.view', this.edit );
$(this.domElement).on( 'blur', '.edit', this.update.bind(this) ); $( this.domElement ).on( 'blur', '.edit', this.update.bind( this ) );
$(this.domElement).on( 'keypress', '.edit', this.blurInput ); $( this.domElement ).on( 'keypress', '.edit', this.blurInput );
$('#toggle-all').click( this.toggleAll ); $('#toggle-all').click( this.toggleAll );
}, },
...@@ -37,17 +35,18 @@ var todo = window.todo || {}; ...@@ -37,17 +35,18 @@ var todo = window.todo || {};
}, },
toggleAll: function() { 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 ) { edit: function( event ) {
$(this).closest('li').addClass('editing').find('.edit').select(); $( this ).closest('li').addClass('editing').find('.edit').select();
}, },
update: function( event ) { update: function( event ) {
var li = $(event.target).closest('li').removeClass('editing'); var li = $( event.target ).closest('li').removeClass('editing'),
var id = li.attr('data-id'); id = li.data('id'),
var val = li.find('.edit').val().trim(); val = li.find('.edit').val().trim();
if ( val ) { if ( val ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.UPDATE, val, id ) ); this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.UPDATE, val, id ) );
} }
...@@ -57,11 +56,10 @@ var todo = window.todo || {}; ...@@ -57,11 +56,10 @@ var todo = window.todo || {};
}, },
blurInput: function( event ) { blurInput: function( event ) {
if (event.which === ENTER_KEY) { if ( event.which === ENTER_KEY ) {
event.target.blur(); event.target.blur();
} }
} }
}); });
todo.TodoListView.NAME = 'TodoListView'; todo.TodoListView.NAME = 'TodoListView';
...@@ -69,26 +67,28 @@ var todo = window.todo || {}; ...@@ -69,26 +67,28 @@ var todo = window.todo || {};
todo.TodoInputView = soma.View.extend({ todo.TodoInputView = soma.View.extend({
init: function() { init: function() {
$(this.domElement).keypress( this.keyPressHandler.bind(this) ); $( this.domElement ).keypress( this.keyPressHandler.bind( this ) );
$(this.domElement).blur( this.blur ); $( this.domElement ).blur( this.blur );
}, },
keyPressHandler: function( event ) { keyPressHandler: function( event ) {
if (event.which === ENTER_KEY) { if ( event.which === ENTER_KEY ) {
this.createItem(); this.createItem();
} }
}, },
createItem: function() { createItem: function() {
var value = this.domElement.value.trim(); var value = this.domElement.value.trim();
if (value) {
if ( value ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CREATE, value ) ); this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CREATE, value ) );
} }
this.domElement.value = ''; this.domElement.value = '';
}, },
blur: function( event ) { blur: function( event ) {
if (!this.value.trim()) { if ( !this.value.trim() ) {
this.value = ''; this.value = '';
} }
} }
...@@ -98,24 +98,22 @@ var todo = window.todo || {}; ...@@ -98,24 +98,22 @@ var todo = window.todo || {};
todo.TodoInputView.NAME = 'TodoInputView'; todo.TodoInputView.NAME = 'TodoInputView';
todo.FooterView = soma.View.extend({ todo.FooterView = soma.View.extend({
template: null, template: null,
init: function() { init: function() {
this.template = Handlebars.compile( $('#' + this.domElement.id + '-template').html() ); this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$(this.domElement).on( 'click', '#clear-completed', this.clearCompleted.bind(this) ); $( this.domElement ).on( 'click', '#clear-completed', this.clearCompleted.bind( this ) );
}, },
render: function( data ) { render: function( data ) {
$(this.domElement).html( this.template( data ) ); $( this.domElement ).html( this.template( data ) );
$(this.domElement).toggle( !!data.length ); $( this.domElement ).toggle( !!data.length );
$('#clear-completed').toggle( !!data.completed ); $('#clear-completed').toggle( !!data.completed );
}, },
clearCompleted: function(event) { clearCompleted: function( event ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CLEAR_COMPLETED ) ); this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CLEAR_COMPLETED ) );
} }
}); });
todo.FooterView.NAME = 'FooterView'; 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