render demo

js-framework/src/ui/panel.ts

@@ -25,10 +25,10 @@ export abstract class Panel {
     abstract build(rootView: Group): void
 
     private __data__: any
-    private __rootView__ = new Root
+    private __root__ = new Root
 
     getRootView() {
-        return this.__rootView__
+        return this.__root__
     }
     getInitData() {
         return this.__data__
@@ -38,9 +38,9 @@ export abstract class Panel {
     private __init__(frame: Frame, data: any) {
         log('__init__:', frame, data)
         this.__data__ = data
-        this.__rootView__.width = frame.width
-        this.__rootView__.height = frame.height
-        this.build(this.__rootView__)
+        this.__root__.width = frame.width
+        this.__root__.height = frame.height
+        this.build(this.__root__)
     }
 
     @NativeCall
@@ -65,7 +65,7 @@ export abstract class Panel {
 
     @NativeCall
     private __build__() {
-        this.build(this.__rootView__)
+        this.build(this.__root__)
     }
 
     @NativeCall
@@ -87,7 +87,7 @@ export abstract class Panel {
                 return acc.children.filter(e => e.viewId === cur)[0]
             }
             return acc
-        }, this.__rootView__)
+        }, this.__root__)
     }
 
     private nativeRender(model: Model) {
@@ -100,10 +100,10 @@ export abstract class Panel {
     }
 
     private hookAfterNativeCall() {
-        if (this.__rootView__.isDirty()) {
-            const model = this.__rootView__.toModel()
+        if (this.__root__.isDirty()) {
+            const model = this.__root__.toModel()
             this.nativeRender(model)
-            this.__rootView__.clean()
+            this.__root__.clean()
         }
     }
 

js-framework/src/ui/view.ts

@@ -61,11 +61,11 @@ export abstract class View implements Modeling {
             get: (target, p) => {
                 return Reflect.get(target, p)
             },
-            set: (target, p, v) => {
+            set: (target, p, v, receiver) => {
                 const oldV = Reflect.get(target, p)
                 const ret = Reflect.set(target, p, v)
                 if (Reflect.getMetadata(p, target)) {
-                    this.onPropertyChanged(p.toString(), oldV, v)
+                    receiver.onPropertyChanged(p.toString(), oldV, v)
                 }
                 return ret
             }
@@ -105,6 +105,12 @@ export abstract class View implements Modeling {
 
     __dirty_props__: { [index: string]: Model | undefined } = {}
 
+    nativeViewModel = {
+        id: this.viewId,
+        type: this.constructor.name,
+        props: this.__dirty_props__,
+    }
+
     onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV)
@@ -139,12 +145,9 @@ export abstract class View implements Modeling {
             loge(`Cannot find callback:${id} for ${JSON.stringify(this.toModel())}`)
         }
     }
+
     toModel() {
-        return {
-            id: this.viewId,
-            type: this.constructor.name,
-            props: this.__dirty_props__,
-        }
+        return this.nativeViewModel
     }
 
     @Property
@@ -196,12 +199,14 @@ export abstract class Group extends View {
     @Property
     children: View[] = new Proxy([], {
         set: (target, index, value) => {
-            if (typeof index === 'number' && value instanceof View) {
+            if (index === 'length') {
+                this.getDirtyChildrenModel().length = value as number
+            } else if (typeof index === 'string'
+                && parseInt(index) >= 0
+                && value instanceof View) {
                 value.parent = this
                 const childrenModel = this.getDirtyChildrenModel()
-                childrenModel[index] = value.toModel()
-            } else if (index === 'length') {
-                this.getDirtyChildrenModel().length = value as number
+                childrenModel[parseInt(index)] = value.nativeViewModel
             }
             return Reflect.set(target, index, value)
         }
@@ -227,7 +232,8 @@ export abstract class Group extends View {
     }
 
     onChildPropertyChanged(child: View, propKey: string, oldV: Model, newV: Model) {
-
+        loge('onChildPropertyChanged:' + (this.children.indexOf(child)))
+        this.getDirtyChildrenModel()[this.children.indexOf(child)] = child.nativeViewModel
     }
 }