tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:adjust mvvm api

Browse Source
This commit is contained in:
pengfei.zhou 2019-10-25 14:13:35 +08:00
parent 81eb27843a
commit 182e6c9b74
4 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/Counter.ts
View File

@ -96,7 +96,7 @@ class CounterVM extends ViewModel<CountModel, CounterView> {
} }
@Entry @Entry
class MyPage extends VMPanel<CountModel>{ class MyPage extends VMPanel<CountModel, CounterView>{
getViewHolderClass() { getViewHolderClass() {

34
demo/src/Snake.ts
View File

@ -1,4 +1,4 @@
import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout } from "doric"; import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull } from "doric";
type SnakeNode = { type SnakeNode = {
x: number x: number
@ -136,8 +136,8 @@ class SnakeModel {
class SnakeView extends ViewHolder<SnakeModel> { class SnakeView extends ViewHolder<SnakeModel> {
panel: Stack = new Stack panel!: Stack
start: Text = new Text start?: Text
up?: Text up?: Text
down?: Text down?: Text
left?: Text left?: Text
@ -164,7 +164,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
() => { () => {
return (new Stack).also(panel => { return (new Stack).also(panel => {
panel.bgColor = Color.parse('#00ff00') panel.bgColor = Color.parse('#00ff00')
this.panel = panel
}) })
}, },
() => { () => {
@ -244,10 +244,11 @@ class SnakeView extends ViewHolder<SnakeModel> {
it.space = 20 it.space = 20
it.layoutConfig = { it.layoutConfig = {
alignment: new Gravity().centerX().top(), alignment: new Gravity().centerX().top(),
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.AT_MOST,
} }
}) it.gravity = new Gravity().centerX()
}).in(root)
} }
buildController(text: string) { buildController(text: string) {
@ -261,6 +262,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
} }
bind(state: SnakeModel): void { bind(state: SnakeModel): void {
log('build', state)
this.panel.width = state.width * 10 this.panel.width = state.width * 10
this.panel.height = state.height * 10 this.panel.height = state.height * 10
let node: SnakeNode | undefined = state.head let node: SnakeNode | undefined = state.head
@ -334,19 +336,11 @@ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
} }
onAttached(state: SnakeModel, v: SnakeView): void { onAttached(state: SnakeModel, v: SnakeView): void {
v.start.onClick = this.start takeNonNull(v.start)(it => it.onClick = this.start)
if (v.left) { takeNonNull(v.left)(it => it.onClick = this.left)
v.left.onClick = this.left takeNonNull(v.right)(it => it.onClick = this.right)
} takeNonNull(v.up)(it => it.onClick = this.up)
if (v.right) { takeNonNull(v.down)(it => it.onClick = this.down)
v.right.onClick = this.right
}
if (v.up) {
v.up.onClick = this.up
}
if (v.down) {
v.down.onClick = this.down
}
} }
} }

3
js-framework/src/ui/view.ts
View File

@ -230,6 +230,9 @@ export abstract class View implements Modeling {
block(this) block(this)
return this return this
} }
in(group: Group) {
group.addChild(this)
}
} }
export interface StackConfig extends LayoutConfig { export interface StackConfig extends LayoutConfig {

1
js-framework/src/vm/mvvm.ts
View File

@ -44,6 +44,7 @@ export abstract class ViewModel<M extends Object, V extends ViewHolder<M>> {
attach(view: Group) { attach(view: Group) {
this.viewHolder.build(view) this.viewHolder.build(view)
this.viewHolder.bind(this.state) this.viewHolder.bind(this.state)
this.onAttached(this.state, this.viewHolder)
} }
abstract onAttached(state: M, vh: V): void abstract onAttached(state: M, vh: V): void