Use ArrayReduction.defineProperty

R=arv
BUG=

Review URL: https://codereview.appspot.com/9333043

examples/how_to/array_reduction.html

@@ -7,24 +7,37 @@ <h1>Reduction</h1>
   <template repeat="{{ items }}">
     <div>{{ name }}: <input type="checkbox" checked="{{ selected }}"><input type="number" value="{{ amount }}"></div>
   </template>
-  Sum: <input disabled value="{{ sum.value }}"><button disabled?="{{ noneSelected.value }}">Only Enable If Any Selected</button>
+  Sum: <input disabled value="{{ sum }}"><button disabled?="{{ noneSelected }}">Only Enable If Any Selected</button>
 </template>
 </form>
 
 <script>
-var t = document.getElementById('reduction');
-t.model = {
+var model = {
   items: [
     { name: 'One', amount: 1, selected: false },
     { name: 'Two', amount: 2, selected: false },
     { name: 'Three', amount: 3, selected: false }
   ]
 };
-t.model.noneSelected = new ArrayReduction(t.model.items, 'selected', function(prev, current) {
-  return prev && !current;
-}, true);
 
-t.model.sum = new ArrayReduction(t.model.items, 'amount', function(prev, current) {
-  return Number(prev) + Number(current);
+// reduction1 must be close()'d if Object.observe is not implemented otherwise => memory leak.
+var reduction1 = ArrayReduction.defineProperty(model, 'noneSelected', {
+  array: model.items,
+  path: 'selected',
+  initial: true,
+  reduce: function(prev, current) {
+    return prev && !current;
+  }
 });
+
+// reduction2 must be close()'d if Object.observe is not implemented otherwise => memory leak.
+var reduction2 = ArrayReduction.defineProperty(model, 'sum', {
+  array: model.items,
+  path: 'amount',
+  reduce: function(prev, current) {
+    return Number(prev) + Number(current);
+  }
+});
+
+document.getElementById('reduction').model = model;
 </script>