mvvm

js-framework/demo.ts

@@ -1,52 +1,71 @@
-import { VMPanel, View, ViewModel, WRAP_CONTENT, Gravity, Mutable, NativeCall, Text, Color, VLayout, Panel, log, logw, loge, Group, Stack, } from "./index"
+import { ViewHolder, VMPanel, View, ViewModel, WRAP_CONTENT, Gravity, Mutable, NativeCall, Text, Color, VLayout, Panel, log, logw, loge, Group, Stack, } from "./index"
+
 interface CountModel {
     count: number
     add: () => void
 }
 
-class CounterVM extends ViewModel<CountModel> {
-    build(root: Group, model: CountModel) {
+class CounterView extends ViewHolder {
+    number = new Text
+    counter = new Text
+    build(root: Group) {
         const vlayout = new VLayout
-        const number = new Text
-        number.textSize = 40
-        number.layoutConfig = {
+        this.number.textSize = 40
+        this.number.layoutConfig = {
             alignment: new Gravity().center()
         }
-        const counter = new Text
-        counter.text = "点击计数"
-        counter.textSize = 20
+        this.counter = new Text
+        this.counter.text = "点击计数"
+        this.counter.textSize = 20
 
         vlayout.space = 20
         vlayout.layoutConfig = {
             alignment: new Gravity().center()
         }
-        vlayout.addChild(number)
-        vlayout.addChild(counter)
+        vlayout.addChild(this.number)
+        vlayout.addChild(this.counter)
 
         root.addChild(vlayout)
+    }
 
-        this.bind((data) => {
-            loge('bind:', data)
-            number.text = data.count.toString()
-            counter.onClick = data.add
-        })
+    setNumber(n: number) {
+        this.number.text = n.toString()
+    }
 
+    setCounter(v: Function) {
+        this.counter.onClick = v
+    }
+}
+
+class CounterVM extends ViewModel<CountModel, CounterView> {
+    binding(v: CounterView, model: CountModel): void {
+        v.setCounter(model.add)
+        v.setNumber(model.count)
     }
 }
 
 
 @Entry
-class MyPage extends VMPanel<CountModel>{
+class MyPage extends VMPanel<CountModel, CounterView>{
 
-    createVM(): ViewModel<CountModel> {
-        return new CounterVM({
+    getVMClass() {
+        return CounterVM
+    }
+
+    getModel() {
+        return {
             count: 0,
             add: function () {
                 this.count++
+            },
         }
-        })
     }
 
+    getViewHolder() {
+        return new CounterView
+    }
+
+
     @NativeCall
     log() {
         log("Hello.HEGO")

js-framework/src/vm/mvvm.ts

@@ -1,7 +1,5 @@
 import { View, Group } from "../ui/view";
 import { Panel } from "../ui/panel";
-import { loge } from "../util/log";
-
 
 function listen<T extends Object>(obj: T, listener: Function): T {
     return new Proxy(obj, {
@@ -26,38 +24,52 @@ function listen<T extends Object>(obj: T, listener: Function): T {
     })
 }
 
-export abstract class VMPanel<M extends Object> extends Panel {
-
-    private vm: ViewModel<M> = this.createVM()
-
-    abstract createVM(): ViewModel<M>
-
-
-    getModel() {
-        return this.vm.getModel()
+export abstract class ViewHolder {
+    abstract build(root: Group): void
 }
 
+export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel {
+
+    private vm: ViewModel<M, V> = new (this.getVMClass())(this.getModel(), this.getViewHolder())
+
+    abstract getVMClass(): new (m: M, v: V) => ViewModel<M, V>
+
+
+    abstract getModel(): M
+
+    abstract getViewHolder(): V
+
     getVM() {
         return this.vm
     }
 
     build(root: Group): void {
-        this.vm.build(root, this.vm.getModel())
+        this.vm.build(root)
     }
 }
 
-export abstract class ViewModel<M extends Object> {
+export abstract class ViewModel<M extends Object, V extends ViewHolder> {
     private model: M
     private listeners: Function[] = []
-    constructor(obj: M) {
+    private viewHolder: V
+
+    constructor(obj: M, v: V) {
         this.model = listen(obj, () => {
             this.listeners.forEach(e => {
                 Reflect.apply(e, this.model, [this.model])
             })
         })
+        this.viewHolder = v
     }
 
-    abstract build(root: Group, model: M): void
+    build(root: Group) {
+        this.viewHolder.build(root)
+        this.bind((data: M) => {
+            this.binding(this.viewHolder, this.model)
+        })
+    }
+
+    abstract binding(v: V, model: M): void
 
     getModel() {
         return this.model