diff --git a/README.md b/README.md index 148a799..18038ae 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ An opinionated data binding library. The two components of a web page built with Datum.js are the *template* and the *view model*. The template is the HTML between the ` ` tags before Datum.js has modified it. -You the developer are responsible for putting the tempate in the body of the DOM. +You the developer are responsible for putting the template in the body of the DOM. Datum.js is agnostic about how you do this. (If you're having trouble jQuery's [load](https://api.jquery.com/load/) method is a good option.) diff --git a/docs/readme.html b/docs/readme.html index 1ccd70b..8015885 100644 --- a/docs/readme.html +++ b/docs/readme.html @@ -4,7 +4,7 @@

The Basics of Data Binding with D

Initialisation

The two components of a web page built with Datum.js are the template and the view model. The template is the HTML between the <body> </body> tags before Datum.js has modified it. -You the developer are responsible for putting the tempate in the body of the DOM. +You the developer are responsible for putting the template in the body of the DOM. Datum.js is agnostic about how you do this. (If you're having trouble jQuery's load method is a good option.)

The view model is a single JavaScript object that contains all of the data that will be displayed on the web page and all of the logic for interacting with the web page. diff --git a/src/array/ArrayElement.js b/src/array/ArrayElement.js index ab91eff..aece7b3 100644 --- a/src/array/ArrayElement.js +++ b/src/array/ArrayElement.js @@ -1,6 +1,8 @@ define(["array/ArrayItemElement"], function(ArrayItemElement) { - function ArrayElement(element, initialLength) { + function ArrayElement(domElement, initialLength) { + + var element = domElement.get(); var child; @@ -92,6 +94,11 @@ define(["array/ArrayItemElement"], function(ArrayItemElement) { } }; + this.appendChild = function(child) { + + element.appendChild(child); + }; + this.reset = function() { while (element.lastChild) { @@ -102,11 +109,6 @@ define(["array/ArrayItemElement"], function(ArrayItemElement) { element.appendChild(child.get()); }; - this.getChild = function() { - - return child; - }; - this.equals = function(other) { return other.hasEqual(element); @@ -119,7 +121,7 @@ define(["array/ArrayItemElement"], function(ArrayItemElement) { this.get = function() { - return element; + return domElement; }; } diff --git a/src/array/ArrayItemElement.js b/src/array/ArrayItemElement.js index 2332eaf..ac99a5f 100644 --- a/src/array/ArrayItemElement.js +++ b/src/array/ArrayItemElement.js @@ -1,6 +1,6 @@ define([], function() { - function ArrayElement(element) { + function ArrayItemElement(element) { var index = 0; @@ -42,5 +42,5 @@ define([], function() { }; } - return ArrayElement; + return ArrayItemElement; }); diff --git a/src/array/method/Push.js b/src/array/method/Push.js index 8910739..6c91efa 100644 --- a/src/array/method/Push.js +++ b/src/array/method/Push.js @@ -1,9 +1,4 @@ -define([ - "property/TransientProperty", - "element/DOMElement" -], function( - TransientProperty, - DOMElement) { +define(["property/TransientProperty"], function(TransientProperty) { function Push(model, elements, properties, propertyType) { @@ -25,8 +20,7 @@ define([ var finalIndex = properties.length - 1; element.append(); - property.applyBinding( - new DOMElement(element.get()), finalIndex, model); + property.applyBinding(element.get(), finalIndex, model); } } diff --git a/src/array/method/Sort.js b/src/array/method/Sort.js index 4631269..204d6c6 100644 --- a/src/array/method/Sort.js +++ b/src/array/method/Sort.js @@ -38,10 +38,7 @@ define([], function() { for (var i = 0; i < elements.length; i++) { - var element = elements[i].get(); - var children = [].slice.call(element.children); - - removeChildren(element); + var children = elements[i].removeChildren(); for (var j = 0; j < children.length; j++) { @@ -57,14 +54,6 @@ define([], function() { return allChildren; } - function removeChildren(element) { - - while (element.lastChild) { - - element.removeChild(element.lastChild); - } - } - function replaceSortedObjects(modelChildrenProperties) { for (var i = 0; i < model.length; i++) { @@ -74,9 +63,7 @@ define([], function() { for (var j = 0; j < elements.length; j++) { - var element = elements[j].get(); - - element.appendChild(modelChildrenProperties[i].children[j]); + elements[j].appendChild(modelChildrenProperties[i].children[j]); } } } diff --git a/src/array/method/Splice.js b/src/array/method/Splice.js index 55551f6..7b28234 100644 --- a/src/array/method/Splice.js +++ b/src/array/method/Splice.js @@ -1,9 +1,4 @@ -define([ - "property/TransientProperty", - "element/DOMElement" -], function( - TransientProperty, - DOMElement) { +define(["property/TransientProperty"], function(TransientProperty) { function Splice(model, elements, properties, propertyType) { @@ -63,7 +58,7 @@ define([ var element = elements[j]; element.insertAtIndex(start); - property.applyBinding(new DOMElement(element.get()), start, model); + property.applyBinding(element.get(), start, model); } } } diff --git a/src/array/method/Unshift.js b/src/array/method/Unshift.js index af1b783..1c67c4d 100644 --- a/src/array/method/Unshift.js +++ b/src/array/method/Unshift.js @@ -1,9 +1,4 @@ -define([ - "property/TransientProperty", - "element/DOMElement" -], function( - TransientProperty, - DOMElement) { +define(["property/TransientProperty"], function(TransientProperty) { function Unshift(model, elements, properties, propertyType) { @@ -24,7 +19,7 @@ define([ var element = elements[j]; element.prepend(); - property.applyBinding(new DOMElement(element.get()), 0, model); + property.applyBinding(element.get(), 0, model); } } diff --git a/src/element/DOMElement.js b/src/element/DOMElement.js index 5f6707d..511f5fd 100644 --- a/src/element/DOMElement.js +++ b/src/element/DOMElement.js @@ -88,7 +88,7 @@ define([ this.toArrayElement = function(initialLength) { - return new ArrayElement(element, initialLength); + return new ArrayElement(this, initialLength); }; this.get = function() {