diff --git a/js-framework/index.ts b/js-framework/index.ts
index 4079689c..029293cb 100644
--- a/js-framework/index.ts
+++ b/js-framework/index.ts
@@ -1,6 +1,10 @@
 import { Text } from "./view/view";
+import { Color } from "./util/color";
 
 const v = new Text
-v.width = 1
-console.log('start:')
-v.height
+v.width = 20
+v.height = 30
+v.left = 5
+v.top = 5
+v.bgColor = Color.parse('#00ff00')
+console.log(v.toModel())
diff --git a/js-framework/util/color.ts b/js-framework/util/color.ts
index be6990a9..483bfe6e 100644
--- a/js-framework/util/color.ts
+++ b/js-framework/util/color.ts
@@ -1,7 +1,10 @@
+import { Modeling } from "./types";
+
 /**
  *  Store color as format AARRGGBB or RRGGBB
  */
-export class Color {
+export class Color implements Modeling {
+
     static TRANSPARENT = new Color(0)
     _value: number = 0
 
@@ -32,7 +35,8 @@ export class Color {
             return color
         }
     }
-    toNumber() {
+
+    toModel() {
         return this._value
     }
 }
diff --git a/js-framework/util/types.ts b/js-framework/util/types.ts
index 8ad66571..5ef2a21f 100644
--- a/js-framework/util/types.ts
+++ b/js-framework/util/types.ts
@@ -18,3 +18,9 @@ export function Property(target: IWatcher, propKey: string) {
         }
     })
 }
+
+export interface Modeling {
+    toModel(): Model
+}
+
+export type Model = string | number | boolean | Modeling | { [index: string]: Model | undefined }
\ No newline at end of file
diff --git a/js-framework/view/view.ts b/js-framework/view/view.ts
index 06c4d916..17d9258d 100644
--- a/js-framework/view/view.ts
+++ b/js-framework/view/view.ts
@@ -1,9 +1,8 @@
 import { Color, GradientColor } from "../util/color"
-import { Property, IWatcher } from "../util/types";
+import { Property, IWatcher, Modeling, Model } from "../util/types";
 
 
-export abstract class View implements IWatcher {
-
+export abstract class View implements IWatcher, Modeling {
     @Property
     width: number = 0
 
@@ -63,8 +62,23 @@ export abstract class View implements IWatcher {
     }
     /** Anchor end*/
 
-    onPropertyChanged(propKey: string, oldV: any, newV: any): void {
-        console.log(`onPropertyChanged:${propKey},old value is ${oldV},new value is ${newV}`)
+    __dirty_props__?: { [index: string]: Model | undefined }
+
+    onPropertyChanged(propKey: string, oldV: Model, newV: Model): void {
+        //console.log(`onPropertyChanged:${propKey},old value is ${oldV},new value is ${newV}`)
+        if (this.__dirty_props__ === undefined) {
+            this.__dirty_props__ = {}
+        }
+        if (newV instanceof Object
+            && Reflect.has(newV, 'toModel')
+            && Reflect.get(newV, 'toModel') instanceof Function) {
+            newV = Reflect.apply(Reflect.get(newV, 'toModel'), newV, [])
+        }
+        this.__dirty_props__[propKey] = newV
+    }
+
+    toModel() {
+        return this.__dirty_props__ || {}
     }
 }