Fix putting model data into DOM for some edge cases

MediaMath · Mar 2, 2016 · 5c643f1 · 5c643f1
1 parent f1951b7
commit 5c643f1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git a/src/mm-repeater/index.html b/src/mm-repeater/index.html
@@ -95,7 +95,7 @@
 	</head>
 	<body>
 		<div id='container'>
-			<mm-repeater id="repeater">
+			<!-- <mm-repeater id="repeater">
 				<template preserve-content>
 					<mm-input name="name"></mm-input>
 					<mm-dropdown name="firstOption">
@@ -110,7 +110,7 @@
 						<mm-radio><label>Test 3</label></mm-radio>
 					</mm-group>
 				</template>
-			</mm-repeater>
+			</mm-repeater> -->
 
 			<hr>
 
@@ -153,10 +153,8 @@ <h3>Prepopulated</h3>
 				}
 			]
 			var wd = document.querySelector('#withData');
-			wd.async(function() {
-				wd.data = null
-				wd.value = data;
-			});
+			// wd.set('data', data);
+			wd.value = data;
 
 			document.querySelector('#validateBtn').addEventListener('click', function() {
 				wd.validate();

diff --git a/src/mm-repeater/mm-repeater.js b/src/mm-repeater/mm-repeater.js
@@ -18,7 +18,8 @@
 			data: {
 				type: Array,
 				notify: true,
-				value: function() { return [{}]; }
+				value: function() { return [{}]; },
+				observer: '_handleDataChanged'
 			},
 
 			addRowLabel: {
@@ -44,40 +45,46 @@
 		},
 
 		observers: [
-			'_injectModelData(data.*)'
+			'_handleDataPath(data.*)'
 		],
 
-		_injectModelData: function(e) {
+		_handleDataPath: function(e) {
 			var path = e.path.split('.'),
 				record = path[path.length-1];
-
-			console.log(e);
 			if(record === '_ref') {
-				var index = parseInt(path[1].substring(1)),
-					model = e.base[index],
-					node = model._ref;
-
-				if(node) {
-					var fields = node.querySelectorAll('[name]');
-					for(var i=0; i<fields.length; i++) {
-						var field = fields[i],
-							name = field.getAttribute('name');
-						if(model[name]) field.setAttribute('value', model[name]);
-					}
+				var index = parseInt(path[1].substring(1));
+				this._injectModelData(index);
+			}
+		},
+
+		_handleDataChanged: function(newData, oldData) {
+			if(oldData) {
+				// Because of binding weirdness we need to move _refs manually from the old array to the new array
+				for(var i=oldData.length-1; i>= 0; i--) {
+					newData[i]._ref = oldData[i]._ref;
 				}
 			}
+
+			for(var j=newData.length-1; j>= 0; j--) {
+				this._injectModelData(j);
+			}
 		},
 
-		// Model -> DOM
-		// DOM -> Model
-		// Push onto DOM with empty state
-		// Pop off DOM |> (DOM -> Model)
-		// Model -> DOM |> Push multiple onto DOM
-		// Modify DOM in place
+		_injectModelData: function(index, data) {
+			if(!data) data = this.data;
+
+			var model = data[index],
+				node = model._ref;
 
-		// Add log
-		// Remove log
-		// Change log
+			if(node) {
+				var fields = node.querySelectorAll('[name]');
+				for(var i=0; i<fields.length; i++) {
+					var field = fields[i],
+						name = field.getAttribute('name');
+					if(model[name]) field.setAttribute('value', model[name]);
+				}
+			}
+		},
 
 		ready: function() {
 			var templateTag = this.queryEffectiveChildren('template');