Perform two-way-binding without using sync

sirbrillig · sirbrillig · commit 16f97627a2fa · 2017-02-10T18:16:38.000-05:00
diff --git a/js/widget-form.js b/js/widget-form.js
@@ -243,7 +243,7 @@ wp.widgets.Form = (function( api, $, _ ) {
 		},
 
 		/**
-		 * Create elements to link setting value properties with corresponding inputs in the form.
+		 * Link setting value properties with corresponding inputs in the form.
 		 *
 		 * @returns {void}
 		 */
@@ -252,17 +252,19 @@ wp.widgets.Form = (function( api, $, _ ) {
 			initialInstanceData = form.getValue();
 			form.syncedProperties = {};
 			form.container.find( ':input[data-field]' ).each( function() {
-				var input = $( this ), field = input.data( 'field' ), syncedProperty;
+				var input = $( this ), field = input.data( 'field' );
 				if ( _.isUndefined( initialInstanceData[ field ] ) ) {
 					return;
 				}
-
-				// @todo: use setState instead of updating the model directly
-				syncedProperty = form.createSyncedPropertyValue( form.model, field );
-				syncedProperty.element = new api.Element( input );
-				syncedProperty.element.set( initialInstanceData[ field ] );
-				syncedProperty.element.sync( syncedProperty.value );
-				form.syncedProperties[ field ] = syncedProperty;
+				input.on( 'change', function( event ) {
+					var newValue = {};
+					newValue[ field ] = event.target.value;
+					form.setState( newValue );
+				} );
+				form.model.bind( function( newData ) {
+					var newValue = newData[ field ];
+					input.val( newValue );
+				} );
 			} );
 		},
 
