Derby 0.6の学習の例＃2

作業オプションを調べる

• 新しいタスクが上部の入力フィールドに入力され、 enterキーを押すとリストに移動します。
• リスト内のタスクは、タスクの右側にある「十字」をクリックして削除できます（タスクにカーソルを合わせると表示されます）。
• タスクの左側にある「チェックマーク」をクリックして、タスクを「完了」とマークできます（チェックボックスをオフにすることができます）。
• タスクをダブルクリックすると、編集モードになり、右、Enterキーを押します-タスクが更新されます。
• タスクを完了した場合、右下に「完了完了」ボタンが表示され、クリックすると、完了したタスクが削除されます。
• 完了したアクティブなタスクをカウント（および表示）します。 ステータスバーの下部。
• また、下のステータス行には3つのリンク（すべて、アクティブ、完了、URLをそれぞれ「＃/」、「＃/アクティブ」、「＃/完了」に変更）があり、それらをクリックするとタスクフィルターが変更されます：すべてが表示されますアクティブなタスク（完了していない）または完了したタスク。

基礎となるもの

  <section id="todoapp"> <header id="header"> <h1>todos</h1> <form id="todo-form"> <input id="new-todo" placeholder="What needs to be done?" autofocus> </form> </header> <section id="main"> <input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <li> <div class="view"> <input class="toggle" type="checkbox"> <label>hello</label> <button class="destroy"> </button> </div> <form > <input class="edit"> </form> </li> </ul> </section> <footer id="footer"> <span id="todo-count"><strong>0</strong> <span>items left</span> </span> <ul id="filters"> <li><a href="/" class="selected">All</a></li> <li><a href="/active">Active</a></li> <li><a href="/completed">Completed</a></li> </ul> <button id="clear-completed">Clear completed (0)</button> </footer> </section> 

1. ヘッダー-ここがメイン入力です。 新しいタスクを導入するために必要です。
2. main-メインブロック。タスクリスト自体はここに格納されます。
3. フッター-ステータス行、ここの情報、フィルターと「クリア完了」ボタンの切り替え

プロジェクト構造

 public/ bg.png app # - views/ index.html css/ index.css index.js #  - server.js #    package.json 

はじめに

 <Body:> <section id="todoapp"> <view name="header"/> <view name="main"/> <view name="footer"/> </section> <header:> <header id="header"> <h1>todos</h1> <form id="todo-form"> <input id="new-todo" placeholder="What needs to be done?" autofocus> </form> </header> <main:> <section id="main"> <input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <li> <div class="view"> <input class="toggle" type="checkbox"> <label>hello</label> <button class="destroy"> </button> </div> <form > <input class="edit"> </form> </li> </ul> </section> <footer:> <footer id="footer"> <span id="todo-count"><strong>0</strong> <span>items left</span> </span> <ul id="filters"> <li><a href="/" class="selected">All</a></li> <li><a href="/active">Active</a></li> <li><a href="/completed">Completed</a></li> </ul> <button id="clear-completed">Clear completed (0)</button> </footer> 

 var server = require('derby-starter'); var appPath = __dirname + '/app'; var options = { static: __dirname + '/public' }; server.run(appPath, options); 

 var derby = require('derby'); var app = module.exports = derby.createApp('todos', __filename); //  app ,         // (    ) global.app = app; app.loadViews (__dirname+'/views'); app.loadStyles(__dirname+'/css'); app.get('/', getTodos); function getTodos(page, model){ page.render(); } 

デザインURL

 app.get('/', getAllTodos); app.get('/active', getActiveTodos); app.get('/completed', getCompletedTodos); 

設計データ

1. テキスト-タスクの説明
2. completed-タスクが完了したことの兆候

 function getTodos(page, model){ model.subscribe('todos', function(){ page.render(); }); } 

• アンダースコアで始まる「パス」（「_session」、「_ page」など）
• 「_page」の機能は何ですか
• ダービーフィルターとは
• コレクション内の特定のデータへの参照は何ですか

• 'todos'-todosコレクション全体へのリンク
• 'users.42'-id = 42のユーザーコレクションのエントリを参照します

 app.on('model', function(model) { model.fn('completed', function(item) { return item.completed; }); }); 

 function getPage(page, model){ model.subscribe('todos', function() { var filter = model.filter('todos', 'completed') filter.ref('_page.todos'); page.render(); }); } 

 app.on('model', function(model) { model.fn('all', function(item) { return true; }); model.fn('completed', function(item) { return item.completed;}); model.fn('active', function(item) { return !item.completed;}); }); app.get('/', getPage('all')); app.get('/active', getPage('active')); app.get('/completed', getPage('completed')); function getPage(filter){ return function(page, model){ model.subscribe('todos', function() { model.filter('todos', filter).ref('_page.todos'); page.render(); }); } } 

タスクの追加とリスト

  <form id="todo-form"> <input id="new-todo" placeholder="What needs to be done?" autofocus> </form> 

  <form id="todo-form" on-submit="addTodo(_page.newTodo)"> <input id="new-todo" placeholder="What needs to be done?" autofocus value="{{_page.newTodo}}"> </form> 

 app.proto.addTodo = function(newTodo){ if (!newTodo) return; this.model.add('todos', { text: newTodo, completed: false }); this.model.set('_page.newTodo', ''); }; 

  <ul id="todo-list"> {{each _page.todos as #todo, #index}} <li class="{{if #todo.completed}}completed{{/}}"> <div class="view"> <input class="toggle" type="checkbox" checked="{{#todo.completed}}"> <label>{{#todo.text}}</label> <button class="destroy"> </button> </div> <form> <input class="edit"> </form> </li> {{/each}} </ul> 

• すべてのToDoをループします（フィルター済み）-それらの要素を作成します-li
• lableタスクの説明を印刷する
• checkboxをtodo.completed
• タスクが完了した場合、 liタグのcompletedクラスを設定します。

アイテムを削除する

 <button class="destroy" on-click="delTodo(#todo.id)"> </button> 

 app.proto.delTodo = function(todoId){ this.model.del('todos.' + todoId); }; 

 <button class="destroy" on-click="model.del('todos.' + #todo.id)"> </button> 

  <button id="clear-completed" on-click="clearCompleted()"> Clear completed (0) </button> 

 app.proto.clearCompleted = function(){ var todos = this.model.get('todos'); for (var id in todos) { if (todos[id].completed) this.model.del('todos.'+id); } } 

要素を編集する

  <ul id="todo-list"> {{each _page.todos as #todo}} <li class="{{if #todo.completed}}completed{{/}} {{if _page.edit.id === #todo.id}}editing{{/}}"> <div class="view"> <input class="toggle" type="checkbox" checked="{{#todo.completed}}"> <label on-dblclick="editTodo(#todo)">{{#todo.text}}</label> <button class="destroy" on-click="delTodo(#todo.id)"> </button> </div> <form on-submit="doneEditing(_page.edit)"> <input id="{{#todo.id}}" class="edit" value="{{_page.edit.text}}" on-keyup="cancelEditing($event)"> </form> </li> {{/each}} </ul> 

 app.proto.editTodo = function(todo){ this.model.set('_page.edit', { id: todo.id, text: todo.text }); window.getSelection().removeAllRanges(); document.getElementById(todo.id).focus() } app.proto.doneEditing = function(todo){ this.model.set('todos.'+todo.id+'.text', todo.text); this.model.set('_page.edit', { id: undefined, text: '' }); } app.proto.cancelEditing = function(e){ // 27 = ESQ-key if (e.keyCode == 27) { this.model.set('_page.edit.id', undefined); } } 

アクティブおよび完了したタスクの数-リアクティブ機能

 _page.counters = { active: 2, completed: 3 } 

 app.on('model', function(model) { model.fn('all', function(item) { return true; }); model.fn('completed', function(item) { return item.completed;}); model.fn('active', function(item) { return !item.completed;}); model.fn('counters', function(todos){ var counters = { active: 0, completed: 0 }; for (var id in todos) { if(todos[id].completed) counters.completed++; else counters.active++; } return counters; }) }); 

  model.subscribe('todos', function () { model.filter('todos', filter).ref('_page.todos'); model.start('_page.counters', 'todos', 'counters'); page.render(); }); 

 <footer:> <footer id="footer"> <span id="todo-count"><strong>{{_page.counters.active}} </strong> <span>items left</span> </span> <ul id="filters"> <li><a href="/" class="{{if $render.url==='/' }}selected{{/}}">All</a></li> <li><a href="/active" class="{{if $render.url==='/active' }}selected{{/}}">Active</a></li> <li><a href="/completed" class="{{if $render.url==='/completed'}}selected{{/}}">Completed</a></li> </ul> <button id="clear-completed" on-click="clearCompleted()" class="{{if _page.counters.completed==0}}hidden{{/}}"> Clear completed ({{_page.counters.completed}}) </button> </footer> 

まとめ