leeoniya · October 24, 2015 06:08
diff --git a/gistfile1.txt b/gistfile1.txt
 ```html
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title>DomChanger External Data</title>
 </head>
 <body>
 	<script src="../domchanger.js"></script>
 	<script>
 		"use strict";

 		function App(headerText, things) {
 			this.header = new Header(headerText);
 			this.thingList = new ThingList(things);

 			// view setup boilerplate required to closure the data to be used by render()
 			var self = this;
 			this.view = function AppView(emit, refresh, refs) {
 				return {
 					render: function() {
 						return [
 							[self.header.view],
 							[self.thingList.view]
 						];
 					}
 				};
 			};
 		}

 		App.prototype.renderTo = function(el) {
 			// store view instance to be able to manually refresh/update the top-level view
 			this.viewInstance = domChanger(this.view, el);
 			this.refresh();
 		};

 		App.prototype.refresh = function() {
 			// update() now just serves the same role as "refresh()" since all data is closured
 			this.viewInstance.update();
 		};

 		function Header(text) {
 			this.text = text;

 			var self = this;
 			this.view = function HeaderView(emit, refresh, refs) {
 				return {
 					render: function() {
 						console.log(self.text);
 						return ["h3", self.text];
 					}
 				};
 			};
 		}

 		function ThingList(things) {
 			this.things = things.map(function(thing) {
 				return new OneThing(thing);
 			});

 			var self = this;
 			this.view = function ThingListView(emit, refresh, refs) {
 				return {
 					render: function() {
 						console.log(self.things);

 						return ["ul", self.things.map(function(thing) {
 							return [thing.view];
 						})];
 					}
 				};
 			};
 		}

 		function OneThing(thing) {
 			this.thing = thing;

 			var self = this;
 			this.view = function OneThingView(emit, refresh, refs) {
 				return {
 					render: function() {
 						return ["li", self.thing];
 					}
 				};
 			};
 		}

 		var headerText = "My App!";
 		var things = ["abc","def"];
 		var myApp = new App(headerText, things);
 		myApp.renderTo(document.body);

 		// mutate data & refresh
 		setTimeout(function() {
 			myApp.header.text = "Your App!";
 			myApp.thingList.things.unshift(new OneThing("999"));
 			myApp.thingList.things.push(new OneThing("123"));
 			myApp.thingList.things[1] = new OneThing("1111111111111111");
 			myApp.refresh();
 		}, 2000);
 	</script>
 </body>
 </html>
 ```
	```html
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>DomChanger External Data</title>
	</head>
	<body>
	<script src="../domchanger.js"></script>
	<script>
	"use strict";

	function App(headerText, things) {
	this.header = new Header(headerText);
	this.thingList = new ThingList(things);

	// view setup boilerplate required to closure the data to be used by render()
	var self = this;
	this.view = function AppView(emit, refresh, refs) {
	return {
	render: function() {
	return [
	[self.header.view],
	[self.thingList.view]
	];
	}
	};
	};
	}

	App.prototype.renderTo = function(el) {
	// store view instance to be able to manually refresh/update the top-level view
	this.viewInstance = domChanger(this.view, el);
	this.refresh();
	};

	App.prototype.refresh = function() {
	// update() now just serves the same role as "refresh()" since all data is closured
	this.viewInstance.update();
	};

	function Header(text) {
	this.text = text;

	var self = this;
	this.view = function HeaderView(emit, refresh, refs) {
	return {
	render: function() {
	console.log(self.text);
	return ["h3", self.text];
	}
	};
	};
	}

	function ThingList(things) {
	this.things = things.map(function(thing) {
	return new OneThing(thing);
	});

	var self = this;
	this.view = function ThingListView(emit, refresh, refs) {
	return {
	render: function() {
	console.log(self.things);

	return ["ul", self.things.map(function(thing) {
	return [thing.view];
	})];
	}
	};
	};
	}

	function OneThing(thing) {
	this.thing = thing;

	var self = this;
	this.view = function OneThingView(emit, refresh, refs) {
	return {
	render: function() {
	return ["li", self.thing];
	}
	};
	};
	}

	var headerText = "My App!";
	var things = ["abc","def"];
	var myApp = new App(headerText, things);
	myApp.renderTo(document.body);

	// mutate data & refresh
	setTimeout(function() {
	myApp.header.text = "Your App!";
	myApp.thingList.things.unshift(new OneThing("999"));
	myApp.thingList.things.push(new OneThing("123"));
	myApp.thingList.things[1] = new OneThing("1111111111111111");
	myApp.refresh();
	}, 2000);
	</script>
	</body>
	</html>
	```