From e37c425d825626abc1f8c396e0163bb907d48a5c Mon Sep 17 00:00:00 2001 From: Daniel Santana Date: Mon, 23 Mar 2015 17:05:17 -0400 Subject: [PATCH 1/4] A simplier example with less code This example is a little simplier and probably faster because it: * does not create a new closure * does not call a closure * does not create a new variable (vm) * does not search for that variable in two scopes every time it needs to be used --- docs/getting-started.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/getting-started.md b/docs/getting-started.md index 84760ade..aaa1e8f0 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -151,6 +151,29 @@ todo.vm = (function() { }()) ``` +or + +```javascript +//define the view-model +todo.vm = { + init: function() { + //a running list of todos + this.list = new todo.TodoList(); + + //a slot to store the name of a new todo before it is created + this.description = m.prop(''); + + //adds a todo to the list, and clears the description field for user convenience + this.add = function(description) { + if (description()) { + this.list.push(new todo.Todo({description: description()})); + this.description(""); + } + }; + } +}; +``` + The code above defines a view-model object called `vm`. It is simply a javascript object that has a `init` function. This function initializes the `vm` object with three members: `list`, which is simply an array, `description`, which is an `m.prop` getter-setter function with an empty string as the initial value, and `add`, which is a method that adds a new Todo instance to `list` if an input description getter-setter is not an empty string. Later in this guide, we'll pass the `description` property as the parameter to this function. When we get there, I'll explain why we're passing description as an argument instead of simply using OOP-style member association. From 51144999584d4b9e35689af799a281c6783b01a6 Mon Sep 17 00:00:00 2001 From: Leo Horie Date: Mon, 23 Mar 2015 22:23:27 -0400 Subject: [PATCH 2/4] #512 revert #382 due to diff engine regression --- docs/change-log.md | 1 + mithril.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/change-log.md b/docs/change-log.md index 1627c459..d889581a 100644 --- a/docs/change-log.md +++ b/docs/change-log.md @@ -18,6 +18,7 @@ - fix dom element ownership bug when mixing keyed elements and third party plugin elements [#463](https://github.com/lhorie/mithril.js/issues/463) - fix edge case in flatten algorithm [#448](https://github.com/lhorie/mithril.js/issues/448) - prevent unnecessary DOM move operation when mixing keyed and unkeyed elements [#398](https://github.com/lhorie/mithril.js/issues/398) +- revert [#382](https://github.com/lhorie/mithril.js/issues/382) due to diff regression [#512](https://github.com/lhorie/mithril.js/issues/512) --- diff --git a/mithril.js b/mithril.js index b9d2a974..8cd2181b 100644 --- a/mithril.js +++ b/mithril.js @@ -61,7 +61,8 @@ var m = (function app(window, undefined) { for (var attrName in attrs) { if (attrName === classAttrName) { - if (attrs[attrName] !== "") cell.attrs[attrName] = (cell.attrs[attrName] || "") + " " + attrs[attrName]; + var className = cell.attrs[attrName] + cell.attrs[attrName] = (className && attrs[attrName] ? className + " " : className || "") + attrs[attrName]; } else cell.attrs[attrName] = attrs[attrName] } From 0ed23d4fa31cee5bfdc184476a253e18d5fd55ba Mon Sep 17 00:00:00 2001 From: Leo Horie Date: Mon, 23 Mar 2015 22:49:15 -0400 Subject: [PATCH 3/4] push test --- tests/mithril-tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/mithril-tests.js b/tests/mithril-tests.js index 56f861d4..2bd3de83 100644 --- a/tests/mithril-tests.js +++ b/tests/mithril-tests.js @@ -29,10 +29,10 @@ function testMithril(mock) { test(function() {return m(".foo", {"class": "bar"}).attrs["class"] == "foo bar"}) test(function() {return m(".foo", {className: "bar"}).attrs.className == "foo bar"}) test(function() {return m(".foo", {className: ""}).attrs.className == "foo"}) - test(function() {return m("div", {className: ""}).attrs.className === undefined}) //https://github.com/lhorie/mithril.js/issues/382 + test(function() {return m("div", {className: ""}).attrs.className === ""}) //https://github.com/lhorie/mithril.js/issues/382 and 512 test(function() {return m("div", {class: ""}).attrs.className === undefined}) test(function() {return m("div", {className: ""}).attrs.class === undefined}) - test(function() {return m("div", {class: ""}).attrs.class === undefined}) + test(function() {return m("div", {class: ""}).attrs.class === ""}) test(function() {return m("div", [1, 2, 3], 4).children.length === 2}) test(function() {return m("div", [1, 2, 3], 4).children[0].length === 3}) test(function() {return m("div", [1, 2, 3], 4).children[1] === 4}) From 117739ce1c1928e7c37c3ca73a333ac0a58af077 Mon Sep 17 00:00:00 2001 From: Leo Horie Date: Tue, 24 Mar 2015 20:23:05 -0400 Subject: [PATCH 4/4] remove iife from docs example --- docs/getting-started.md | 35 +++++------------------------------ 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index aaa1e8f0..ccf8b2fd 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -128,46 +128,21 @@ View-models are also responsible for handling business logic that revolves aroun In the case of our todo application, the view-model needs a few things: it needs to track a running list of todos and a field for adding new todos, and it needs to handle the logic of adding to the todo and the implications of this action of the UI. -```javascript -//define the view-model -todo.vm = (function() { - var vm = {} - vm.init = function() { - //a running list of todos - vm.list = new todo.TodoList(); - - //a slot to store the name of a new todo before it is created - vm.description = m.prop(""); - - //adds a todo to the list, and clears the description field for user convenience - vm.add = function(description) { - if (description()) { - vm.list.push(new todo.Todo({description: description()})); - vm.description(""); - } - }; - } - return vm -}()) -``` - -or - ```javascript //define the view-model todo.vm = { init: function() { //a running list of todos - this.list = new todo.TodoList(); + todo.vm.list = new todo.TodoList(); //a slot to store the name of a new todo before it is created - this.description = m.prop(''); + todo.vm.description = m.prop(''); //adds a todo to the list, and clears the description field for user convenience - this.add = function(description) { + todo.vm.add = function(description) { if (description()) { - this.list.push(new todo.Todo({description: description()})); - this.description(""); + todo.vm.list.push(new todo.Todo({description: description()})); + todo.vm.description(""); } }; }