diff --git a/todoitem.js b/todoitem.js index 6a01ba9..2b11c91 100644 --- a/todoitem.js +++ b/todoitem.js @@ -17,12 +17,12 @@ function todoItemClass(completed, readMode) { return classes.join(' '); } -function readModeTodoItem(attrs, handlers) { +function readModeTodoItem(params) { return dom.element({ name: 'div', attributes: {className: 'view'}, handlers: { - 'dblclick': function onDblClick() { attrs.readMode.set(false); } + 'dblclick': function onDblClick() { params.readMode.set(false); } }, contents: [ dom.element({ @@ -30,50 +30,50 @@ function readModeTodoItem(attrs, handlers) { attributes: { className: 'toggle', type: 'checkbox', - checked: attrs.completed + checked: params.completed }, handlers: { - click: function(evt) { attrs.completed.set(evt.target.checked); } + click: function(evt) { params.completed.set(evt.target.checked); } } }), dom.element({ name: 'label', - contents: attrs.text.map(prelude.singleton) + contents: params.text.map(prelude.singleton) }), dom.element({ name: 'button', attributes: {className: 'destroy'}, handlers: { - 'click': handlers.remove + 'click': params.handlers.remove } }) ] }); } -function writeModeTodoItem(attrs, handlers) { +function writeModeTodoItem(params) { function onChange(evt) { - if (attrs.readMode.get()) { + if (params.readMode.get()) { return; } var value = evt.target.value.trim(); if (value === '') { - handlers.remove(evt); + params.handlers.remove(evt); } else { - attrs.text.set(value); + params.text.set(value); } - attrs.readMode.set(true); + params.readMode.set(true); } function onKeyUp(evt) { if (evt.keyCode === ESC_KEY) { - evt.target.value = attrs.text.get(); - attrs.readMode.set(true); + evt.target.value = params.text.get(); + params.readMode.set(true); } } return dom.element({ name: 'input', - focus: attrs.readMode.map(prelude.not), - attributes: {className: 'edit', value: attrs.text}, + focus: params.readMode.map(prelude.not), + attributes: {className: 'edit', value: params.text}, handlers: { 'change': onChange, 'blur': onChange, @@ -83,29 +83,30 @@ function writeModeTodoItem(attrs, handlers) { } function todoItemImpl(params) { - var attr = { - text: params.attributes.text, - completed: params.attributes.completed, - readMode: observable.publisher(true) - }; - var handlers = {}; handlers.remove = params.handlers && params.handlers.remove || function() {}; + var ps = { + text: params.text, + completed: params.completed, + readMode: observable.publisher(true), + handlers: handlers + }; + return dom.element({ name: 'li', attributes: { - className: observable.subscriber([attr.completed, attr.readMode], todoItemClass) + className: observable.subscriber([ps.completed, ps.readMode], todoItemClass) }, contents: [ - readModeTodoItem(attr, handlers), - writeModeTodoItem(attr, handlers) + readModeTodoItem(ps), + writeModeTodoItem(ps) ] }); } function todoItem(params) { - var e = {attributes: params.attributes, handlers: params.handlers}; + var e = {text: params.text, completed: params.completed, handlers: params.handlers}; e.render = function() { return todoItemImpl(e); }; return e; } diff --git a/todoitem_test.js b/todoitem_test.js index fb82473..3aaa6d0 100644 --- a/todoitem_test.js +++ b/todoitem_test.js @@ -10,7 +10,8 @@ var eq = assert.deepEqual; // Test double-clicking todo items. (function(){ var todo = todoitem.todoItemImpl({ - attributes: {text: pub('foo'), completed: pub(false)} + text: pub('foo'), + completed: pub(false) }); var readModeTodo = todo.contents[0]; var writeModeTodo = todo.contents[1]; @@ -43,7 +44,8 @@ var eq = assert.deepEqual; // Test marking item as complete. (function(){ var todo = todoitem.todoItemImpl({ - attributes: {text: pub('a'), completed: pub(false)} + text: pub('foo'), + completed: pub(false) }); // Test initial state. @@ -61,22 +63,20 @@ var eq = assert.deepEqual; // Test todoItem className attribute. (function(){ - var todo = todoitem.todoItemImpl({ - attributes: {text: pub('a'), completed: pub(false)} - }); + var todo = todoitem.todoItemImpl({text: pub('a'), completed: pub(false)}); eq(todo.attributes.className.get(), ''); - var todo2 = todoitem.todoItemImpl({ - attributes: {text: pub('a'), completed: pub(true)} - }); + var todo2 = todoitem.todoItemImpl({text: pub('a'), completed: pub(true)}); eq(todo2.attributes.className.get(), 'completed'); })(); // Test removeItem. (function(){ var oTodoData = pub([{text: pub('a'), completed: pub(false)}]); + var itemData = oTodoData.get()[0]; var todo = todoitem.todoItemImpl({ - attributes: oTodoData.get()[0], + text: itemData.text, + completed: itemData.completed, handlers: {remove: function() { tododata.removeItem(0, oTodoData); }} }); var readModeTodo = todo.contents[0]; @@ -91,8 +91,10 @@ var eq = assert.deepEqual; // Test removeItem by editing. (function(){ var oTodoData = pub([{text: pub('a'), completed: pub(false)}]); + var itemData = oTodoData.get()[0]; var todo = todoitem.todoItemImpl({ - attributes: oTodoData.get()[0], + text: itemData.text, + completed: itemData.completed, handlers: {remove: function() { tododata.removeItem(0, oTodoData); }} }); var readModeTodo = todo.contents[0]; @@ -114,9 +116,7 @@ var eq = assert.deepEqual; // Test that render returns somethine renderable. (function(){ - var todo = todoitem.todoItem({ - attributes: {text: pub('a'), completed: pub(false)} - }); + var todo = todoitem.todoItem({text: pub('a'), completed: pub(false)}); eq(typeof todo.render().render, 'function'); })(); diff --git a/todolist.js b/todolist.js index f218fe1..7eeba15 100644 --- a/todolist.js +++ b/todolist.js @@ -10,7 +10,12 @@ function todoList(oTodoData, oFragment) { var handlers = { remove: function() { tododata.removeItem(index, oTodoData); } }; - return todoitem.todoItem({attributes: itemData, handlers: handlers}); + + return todoitem.todoItem({ + text: itemData.text, + completed: itemData.completed, + handlers: handlers + }); } function todoItems(todoData, fragment) {