bind view action and model

js-framework/demo.ts

@@ -1,8 +1,7 @@
 import { VMPanel, View, ViewModel, WRAP_CONTENT, Gravity, Mutable, NativeCall, Text, Color, VLayout, Panel, log, logw, loge, Group, Stack, } from "./index"
-import { CENTER } from "./src/util/gravity";
-
 interface CountModel {
     count: number
+    add: () => void
 }
 
 class CounterVM extends ViewModel<CountModel> {
@@ -23,26 +22,29 @@ class CounterVM extends ViewModel<CountModel> {
         }
         vlayout.addChild(number)
         vlayout.addChild(counter)
+
         root.addChild(vlayout)
 
         this.bind((data) => {
+            loge('bind:', data)
             number.text = data.count.toString()
-            loge(`data changed:${data.count},${vlayout.isDirty()}`)
+            counter.onClick = data.add
         })
-        counter.onClick = () => {
-            model.count++
-            loge('onclick', model.count)
 
     }
 }
-}
 
 
 @Entry
 class MyPage extends VMPanel<CountModel>{
 
     createVM(): ViewModel<CountModel> {
-        return new CounterVM({ count: 0 })
+        return new CounterVM({
+            count: 0,
+            add: function () {
+                this.count++
+            }
+        })
     }
 
     @NativeCall

js-framework/src/vm/mvvm.ts

@@ -1,12 +1,17 @@
 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, {
         get: (target, prop, receiver) => {
             const ret = Reflect.get(target, prop, receiver)
-            if (ret instanceof Object) {
+            if (ret instanceof Function) {
+                return () => {
+                    return Reflect.apply(ret, receiver, arguments)
+                }
+            } else if (ret instanceof Object) {
                 return listen(ret, listener)
             } else {
                 return ret