Binding to ViewBase as source now works (#4195)

Hristo Hristov · web-flow · commit 188a1c2c34ed · 2017-05-16T13:33:02.000+03:00
* Fix 4127

* Move back Binding class to bindable module
diff --git a/tests/app/app/mainPage.ts b/tests/app/app/mainPage.ts
@@ -24,9 +24,7 @@ page.id = "mainPage";
 page.on(Page.navigatedToEvent, onNavigatedTo);
 
 function runTests() {
-    setTimeout(function () {
-        tests.runAll();
-    }, 10);
+    setTimeout(() => tests.runAll(), 10);
 }
 
 function onNavigatedTo(args) {
diff --git a/tests/app/ui/core/bindable/bindable-tests.ts b/tests/app/ui/core/bindable/bindable-tests.ts
@@ -29,6 +29,15 @@ export function test_Bindable_Members() {
     TKUnit.assert(types.isDefined(obj.unbind), "Bindable.unbind not defined");
 };
 
+export function test_Binding_to_bindingContext_of_View() {
+    const target = new Button();
+    const source = new Button();
+
+    target.bind({ targetProperty: "bindingContext", sourceProperty: "text" }, source);
+    source.text = 'a';
+    TKUnit.assertEqual(target.bindingContext, 'a');
+};
+
 export function test_Bindable_Bind_ToTarget_OneWay() {
     const model = new Observable();
     model.set("name", "John");
diff --git a/tns-core-modules/data/observable/observable.d.ts b/tns-core-modules/data/observable/observable.d.ts
@@ -150,6 +150,13 @@ export class Observable {
      */
     _createPropertyChangeData(name: string, value: any, oldValue?: any): PropertyChangeData;
     
+    //@private
+    /**
+     * Filed to use instead of instanceof ViewBase.
+     * @private
+     */
+    public _isViewBase: boolean;
+
     /**
      * @private
      */
diff --git a/tns-core-modules/data/observable/observable.ts b/tns-core-modules/data/observable/observable.ts
@@ -32,6 +32,8 @@ let _wrappedValues = [
 
 export class Observable implements ObservableDefinition {
     public static propertyChangeEvent = "propertyChange";
+    public _isViewBase: boolean;
+
     private _observers = {};
 
     public get(name: string): any {
@@ -233,4 +235,4 @@ export function fromObjectRecursive(source: any): Observable {
     let observable = new ObservableFromObject();
     addPropertiesFromObject(observable, source, true);
     return observable;
-}
+}
diff --git a/tns-core-modules/ui/core/bindable/bindable.d.ts b/tns-core-modules/ui/core/bindable/bindable.d.ts
@@ -59,4 +59,4 @@ export class Binding {
 }
 
 export function getEventOrGestureName(name: string): string;
-export function isEventOrGesture(name: string, view: ViewBase): boolean;
+export function isEventOrGesture(name: string, view: ViewBase): boolean;
diff --git a/tns-core-modules/ui/core/bindable/bindable.ts b/tns-core-modules/ui/core/bindable/bindable.ts
@@ -22,10 +22,9 @@ const contextKey = "context";
 // from $parents['ListView'] will return 'ListView'
 // from $parents[1] will return 1
 const paramsRegex = /\[\s*(['"])*(\w*)\1\s*\]/;
-
 const bc = bindingConstants;
-
 const emptyArray = [];
+
 function getProperties(property: string): Array<string> {
     let result: Array<string> = emptyArray;
     if (property) {
@@ -55,7 +54,7 @@ export function getEventOrGestureName(name: string): string {
 // NOTE: method fromString from "ui/gestures";
 export function isGesture(eventOrGestureName: string): boolean {
     let t = eventOrGestureName.trim().toLowerCase();
-    return t === "tap" 
+    return t === "tap"
         || t === "doubletap"
         || t === "pinch"
         || t === "pan"
@@ -169,8 +168,9 @@ export class Binding {
             return;
         }
 
-        if (data.value) {
-            this.update(data.value);
+        const value = data.value;
+        if (value !== null && value !== undefined) {
+            this.update(value);
         } else {
             // TODO: Is this correct?
             // What should happen when bindingContext is null/undefined?
@@ -279,14 +279,16 @@ export class Binding {
         let prop = parentProperies || "";
 
         for (let i = 0, length = objectsAndProperties.length; i < length; i++) {
-            prop += "$" + objectsAndProperties[i].property;
+            const propName = objectsAndProperties[i].property;
+            prop += "$" + propName;
             let currentObject = objectsAndProperties[i].instance;
-            if (!this.propertyChangeListeners.has(prop) && currentObject instanceof Observable) {
-                addWeakEventListener(
-                    currentObject,
-                    Observable.propertyChangeEvent,
-                    this.onSourcePropertyChanged,
-                    this);
+            if (!this.propertyChangeListeners.has(prop) && currentObject instanceof Observable && currentObject._isViewBase) {
+                // Add listener for properties created with after 3.0 version
+                addWeakEventListener(currentObject, `${propName}Change`, this.onSourcePropertyChanged, this);
+                addWeakEventListener(currentObject, Observable.propertyChangeEvent, this.onSourcePropertyChanged, this);
+                this.propertyChangeListeners.set(prop, currentObject);
+            } else if (!this.propertyChangeListeners.has(prop) && currentObject instanceof Observable) {
+                addWeakEventListener(currentObject, Observable.propertyChangeEvent, this.onSourcePropertyChanged, this);
                 this.propertyChangeListeners.set(prop, currentObject);
             }
         }
@@ -601,4 +603,4 @@ export class Binding {
 
         this.updating = false;
     }
-}
+}
diff --git a/tns-core-modules/ui/core/view-base/view-base.d.ts b/tns-core-modules/ui/core/view-base/view-base.d.ts
@@ -17,6 +17,7 @@ import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "../../la
 import { Length } from "../../styling/style-properties";
 
 export { isIOS, isAndroid, layout, Color };
+
 export * from "../properties";
 export * from "../bindable";
 
@@ -291,6 +292,12 @@ export abstract class ViewBase extends Observable {
     //@endprivate
 }
 
+export class Binding {
+    constructor(target: ViewBase, options: BindingOptions);
+    public bind(source: Object): void;
+    public unbind();
+}
+
 export const idProperty: Property<ViewBase, string>;
 export const classNameProperty: Property<ViewBase, string>;
 export const bindingContextProperty: InheritedProperty<ViewBase, any>;
@@ -299,4 +306,4 @@ export const bindingContextProperty: InheritedProperty<ViewBase, any>;
  * Converts string into boolean value.
  * Throws error if value is not 'true' or 'false'.
  */
-export function booleanConverter(v: string): boolean;
+export function booleanConverter(v: string): boolean;
diff --git a/tns-core-modules/ui/core/view-base/view-base.ts b/tns-core-modules/ui/core/view-base/view-base.ts
@@ -863,6 +863,7 @@ ViewBase.prototype._defaultPaddingTop = 0;
 ViewBase.prototype._defaultPaddingRight = 0;
 ViewBase.prototype._defaultPaddingBottom = 0;
 ViewBase.prototype._defaultPaddingLeft = 0;
+ViewBase.prototype._isViewBase = true;
 
 ViewBase.prototype._batchUpdateScope = 0;
 

Original file line number	Diff line number	Diff line change
`@@ -24,9 +24,7 @@ page.id = "mainPage";`
`24`	`24`	`page.on(Page.navigatedToEvent, onNavigatedTo);`
`25`	`25`
`26`	`26`	`function runTests() {`
`27`		`- setTimeout(function () {`
`28`		`- tests.runAll();`
`29`		`- }, 10);`
	`27`	`+ setTimeout(() => tests.runAll(), 10);`
`30`	`28`	`}`
`31`	`29`
`32`	`30`	`function onNavigatedTo(args) {`
Original file line number	Diff line number	Diff line change
`@@ -59,4 +59,4 @@ export class Binding {`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`export function getEventOrGestureName(name: string): string;`
`62`		`-export function isEventOrGesture(name: string, view: ViewBase): boolean;`
	`62`	`+export function isEventOrGesture(name: string, view: ViewBase): boolean;`