Actually re-render on data change

Author: superdav42

view/adminhtml/web/js/components/preview.js

@@ -20,6 +20,8 @@ define([
                 allData: '${ $.provider }:data'
             }
         },
+        basePrice: ko.observable(),
+        options: ko.observableArray(),
         calculatedPrice: ko.observable(),
         calculatedSize: ko.observable(),
 
@@ -35,10 +37,10 @@ define([
         },
 
         selectedUsageOptionsChanged: function(changed) {
-            var price = this.allData.price;
+            var price = this.basePrice();
             var size_id = this.allData.size_id;
-            for( var index in this.allData.usage.options ) {
-                if (this.allData.usage.options[index].type !== 'drop_down') {
+            for( var index in this.options() ) {
+                if (this.options()[index].type !== 'drop_down') {
                     continue
                 }
                 var selectedOption = this.selectedUsageOptions[index]()
@@ -60,14 +62,26 @@ define([
         },
 
         dataChanged: function( data ) {
-            if ( ! this.selectedUsageOptions || ! data.usage || ! data.usage.options ) {
+            if ( ! this.selectedUsageOptions || ! data || ! data.usage || ! data.usage.options ) {
                 return;
             }
             for( var i = this.selectedUsageOptions.length; i < data.usage.options.length; i++ ) {
                 var ob = ko.observable();
                 ob.subscribe(this.selectedUsageOptionsChanged.bind(this));
                 this.selectedUsageOptions.push(ob)
             }
+            this.basePrice(data.price);
+            var currentOptions = this.options();
+            for (var i = 0; i < data.usage.options.length; i++) {
+                if ( currentOptions[i] ) {
+                    if ( _(currentOptions[i]).isEqual(data.usage.options[i])) {
+                        continue;
+                    }
+                    this.options.splice(i, 1, data.usage.options[i]);
+                } else {
+                    this.options.push(data.usage.options[i]);
+                }
+            }
         },
 
         /**

view/adminhtml/web/template/form/components/preview.html

@@ -1,15 +1,15 @@
 
 <div class="admin__field-complex" style="margin: 0" css="$data.additionalClasses" attr="'data-index': index">
 
-    <div class="admin__field-complex-title" if="allData.price">
+    <div class="admin__field-complex-title" if="basePrice">
         Preview
     </div>
-    <div class="admin__field-complex-title" if="allData.price">
-        Base Price $<span text="allData.price"></span>
+    <div class="admin__field-complex-title" if="basePrice">
+        Base Price $<span text="basePrice"></span>
     </div>
 
     <div class=""
-         each="data: allData.usage.options, as: 'option'"
+         each="data: options, as: 'option'"
          >
         <div class="admin__field" style="margin:0" if="option.type === 'drop_down'">
             <div class="admin__field-label" style="text-align: left">