Update

- Changed Visual Element to be CallbackEventHandlers where Appropriate.
- Added State Subscriptions for Binding to Value Changed Callbacks with Example of Usage.
- Updated with a Field Example in MainView

Author: crazyjackel

Runtime/Scripts/BindingExtensions.cs

@@ -17,35 +17,38 @@ public static IDisposable BindEnabled(this VisualElement element, IReadOnlyReact
                 element.SetEnabled(__property);
             });
         }
-        public static IDisposable BindClick(this VisualElement element, ReactiveCommand<ClickEvent> command)
+        public static IDisposable BindClick(this VisualElement element, IReactiveCommand<ClickEvent> command)
         {
             var d1 = element.BindEnabled(command.CanExecute);
-            var d2 = element.BindVisualElementCallback(command);
+            var d2 = element.BindCallback(command);
             return StableCompositeDisposable.Create(d1, d2);
         }
-        public static IDisposable BindClick<TArgs>(this VisualElement element, ReactiveCommand<(ClickEvent, TArgs)> command, TArgs dataForCallback)
+        public static IDisposable BindClick<TArgs>(this VisualElement element, IReactiveCommand<(ClickEvent, TArgs)> command, TArgs dataForCallback)
         {
             var d1 = element.BindEnabled(command.CanExecute);
-            var d2 = element.BindVisualElementCallback(command, dataForCallback);
+            var d2 = element.BindCallback(command, dataForCallback);
             return StableCompositeDisposable.Create(d1, d2);
         }
-        public static IDisposable BindVisualElementCallback<TEventType>(this VisualElement element, EventCallback<TEventType> callback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
+        #endregion
+
+        #region Callback Event Handler
+        public static IDisposable BindCallback<TEventType>(this CallbackEventHandler element, EventCallback<TEventType> callback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
         {
             element.RegisterCallback(callback, trickleDown);
             return Disposable.Create(() => { element.UnregisterCallback(callback, trickleDown); });
         }
-        public static IDisposable BindVisualElementCallback<TEventType, TUserArgsType>(this VisualElement element, EventCallback<TEventType, TUserArgsType> callback, TUserArgsType dataForCallback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
+        public static IDisposable BindCallback<TEventType, TUserArgsType>(this CallbackEventHandler element, EventCallback<TEventType, TUserArgsType> callback, TUserArgsType dataForCallback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
         {
             element.RegisterCallback(callback, dataForCallback, trickleDown);
             return Disposable.Create(() => { element.UnregisterCallback(callback, trickleDown); });
         }
-        public static IDisposable BindVisualElementCallback<TEventType>(this VisualElement element, ReactiveCommand<TEventType> command, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
+        public static IDisposable BindCallback<TEventType>(this CallbackEventHandler element, IReactiveCommand<TEventType> command, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
         {
             var callback = new EventCallback<TEventType>((ev) => command.Execute(ev));
             element.RegisterCallback(callback, trickleDown);
             return Disposable.Create(() => { element.UnregisterCallback(callback, trickleDown); });
         }
-        public static IDisposable BindVisualElementCallback<TEventType, TUserArgsType>(this VisualElement element, ReactiveCommand<(TEventType, TUserArgsType)> command, TUserArgsType dataForCallback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
+        public static IDisposable BindCallback<TEventType, TUserArgsType>(this CallbackEventHandler element, IReactiveCommand<(TEventType, TUserArgsType)> command, TUserArgsType dataForCallback, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType>, new()
         {
             var callback = new EventCallback<TEventType, TUserArgsType>((ev, args) => command.Execute((ev, args)));
             element.RegisterCallback(callback, dataForCallback, trickleDown);
@@ -54,19 +57,60 @@ public static IDisposable BindClick<TArgs>(this VisualElement element, ReactiveC
         #endregion
 
         #region Notifications
+        public static IDisposable BindValueChanged<T>(this INotifyValueChanged<T> element, IReactiveCommand<ChangeEvent<T>> command)
+        {
+            var callback = new EventCallback<ChangeEvent<T>>((ev) => command.Execute(ev));
+            element.RegisterValueChangedCallback(callback);
+            return Disposable.Create(() => { element.UnregisterValueChangedCallback(callback); });
+        }
         public static IDisposable BindValueChanged<T>(this INotifyValueChanged<T> element, IReactiveProperty<T> property)
         {
             var callback = new EventCallback<ChangeEvent<T>>((ev) => property.Value = ev.newValue);
             element.RegisterValueChangedCallback(callback);
             return Disposable.Create(() => { element.UnregisterValueChangedCallback(callback); });
         }
+        /// <summary>
+        /// Binds Element changes to Update Property Values. 
+        /// Then Initializes Values.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="element">Element with Value Changed Callbacks</param>
+        /// <param name="property">Reactive Property that value should change on a Value Changed Callback</param>
+        /// <param name="stateIsProperty">Whether Default Value should be Default Property Value</param>
+        /// <returns></returns>
+        public static IDisposable BindValueChangedWithState<T>(this INotifyValueChanged<T> element, IReactiveProperty<T> property, bool stateIsProperty = true)
+        {
+            var d1 = BindValueChanged(element, property);
+            if (stateIsProperty)
+            {
+                element.value = property.Value;
+            }
+            else
+            {
+                property.Value = element.value;
+            }
+            return d1;
+        }
         public static IDisposable BindToValueChanged<T>(this INotifyValueChanged<T> element, IReactiveProperty<T> property)
         {
             return property.SubscribeWithState(element, (__property, __element) =>
             {
                 __element.SetValueWithoutNotify(__property);
             });
         }
+        public static IDisposable BindToValueChangedWithState<T>(this INotifyValueChanged<T> element, IReactiveProperty<T> property, bool stateIsProperty = true)
+        {
+            var d1 = BindToValueChanged(element, property);
+            if (stateIsProperty)
+            {
+                element.value = property.Value;
+            }
+            else
+            {
+                property.Value = element.value;
+            }
+            return d1;
+        }
         public static IDisposable BindTwoWayValueChanged<T>(this INotifyValueChanged<T> element, IReactiveProperty<T> property)
         {
             var d1 = BindValueChanged(element, property);

Samples/SamplesBasicUI/Scripts/MainView.cs

@@ -12,12 +12,25 @@ public class MainView : View<MainViewModel>
     {
         public override void OnActivation(MainViewModel viewModel, CompositeDisposable disposable)
         {
+            //Grab Button
             Button button = Root.Q<Button>("ReactiveButton");
             Label label = Root.Q<Label>("Output");
+            TextField field = Root.Q<TextField>("ReactiveTextField");
+            Label fieldLabel = field.labelElement;
 
+            //Bind such that whenever OnButtonClick can Execute, you can click button.
+            //Bind such that whenever Button is clicked, it executes OnButtonClick.
             button.BindClick(viewModel.OnButtonClick).AddTo(disposable);
 
-            label.BindTwoWayValueChanged(viewModel.DebugText).AddTo(disposable);
+            //Bind such that whenever DebugText changes, it updates label value.
+            label.BindToValueChanged(viewModel.DebugText).AddTo(disposable);
+
+            //Bind such that whenever field value changes, it executes OnTextFieldChange
+            //Bind such that whenever field value changes, it updates reactive text. Initializes to default field value.
+            field.BindValueChanged(viewModel.OnTextFieldChange).AddTo(disposable);
+            field.BindValueChangedWithState(viewModel.ReactiveText, false).AddTo(disposable);
+            //Bind such that whenever ReactiveText changes, it updates fieldlabel value.
+            fieldLabel.BindToValueChanged(viewModel.ReactiveText).AddTo(disposable);
         }
     }
 }

Samples/SamplesBasicUI/Scripts/MainViewModel.cs

@@ -11,13 +11,23 @@ namespace RedMoon.ReactiveKit.Samples
     public class MainViewModel : ViewModel<MainViewModel>
     {
         public ReactiveProperty<string> DebugText { get; protected set; } = new ReactiveProperty<string>("");
+        public ReactiveProperty<string> ReactiveText { get; protected set; } = new ReactiveProperty<string>("");
 
         public ReactiveCommand<ClickEvent> OnButtonClick;
+        public ReactiveCommand<ChangeEvent<string>> OnTextFieldChange;
 
         public override void OnInitialization()
         {
             OnButtonClick = new ReactiveCommand<ClickEvent>();
             OnButtonClick.Subscribe((c) => UpdateDebugText(c, "Button Clicked"));
+
+            OnTextFieldChange = new ReactiveCommand<ChangeEvent<string>>();
+            OnTextFieldChange.Subscribe((c) => UpdateDebugText(c, "Field Changed:"));
+        }
+
+        private void UpdateDebugText(ChangeEvent<string> obj, string Text)
+        {
+            DebugText.Value += $"{Text} {obj.previousValue} -> {obj.newValue}\n";
         }
 
         private void UpdateDebugText(ClickEvent obj, string Text)