Commit 1ae32cf

committed

add computed example

1 parent 3770d19 commit 1ae32cfCopy full SHA for 1ae32cf

File tree

+66

-0

lines changed

+66

-0

lines changed

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+package main`
	`2`	`+`
	`3`	`+import (`
	`4`	`+ "github.com/gopherjs/gopherjs/js"`
	`5`	`+ "github.com/oskca/gopherjs-vue"`
	`6`	`+)`
	`7`	`+`
	`8`	`+type Model struct {`
	`9`	`+ *js.Object // this is needed for bidirectional data bindings`
	`10`	+ IntValue int `js:"integer"`
	`11`	+ Str string `js:"str"`
	`12`	`+}`
	`13`	`+`
	`14`	`+// this would be recognized as Inc in html`
	`15`	`+func (m *Model) Inc() {`
	`16`	`+ m.IntValue += 1`
	`17`	`+ println("inc called")`
	`18`	`+}`
	`19`	`+`
	`20`	`+// this would be recognized as Repeat in html`
	`21`	`+func (m *Model) Repeat() {`
	`22`	`+ m.Str = m.Str + m.Str`
	`23`	`+}`
	`24`	`+`
	`25`	`+// this would be recognized as Reset in html`
	`26`	`+func (m *Model) Reset() {`
	`27`	`+ m.Str = "a string "`
	`28`	`+}`
	`29`	`+`
	`30`	`+func main() {`
	`31`	`+ // model`
	`32`	`+ m := &Model{`
	`33`	`+ Object: js.Global.Get("Object").New(),`
	`34`	`+ }`
	`35`	`+ // field assignment is required in this way to make data passing works`
	`36`	`+ m.IntValue = 100`
	`37`	`+ m.Str = "a string"`
	`38`	`+ // options`
	`39`	`+ o := vue.NewOption()`
	`40`	`+ o.SetDataWithMethods(m)`
	`41`	`+ o.AddComputed("double", func(vm *vue.ViewModel) interface{} {`
	`42`	`+ println("reading computed double")`
	`43`	`+ i := vm.Data.Get("integer").Int()`
	`44`	`+ return i * 2`
	`45`	`+ })`
	`46`	`+ v := o.NewViewModel()`
	`47`	`+ v.Mount("#app")`
	`48`	`+}`

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,18 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html>`
	`3`	`+`
	`4`	`+<body>`
	`5`	`+ <div id="app" v-cloak>`
	`6`	`+ <div>integer: {{ integer }}`
	`7`	`+ <input v-model="integer"></input>`
	`8`	`+ </div>`
	`9`	`+ <div>double: {{ double }} </div>`
	`10`	`+ <div>str: {{ str }} </div>`
	`11`	`+ <button v-on:click="Inc">Increase</button>`
	`12`	`+ <button v-on:click="Repeat">Repeat</button>`
	`13`	`+ <button v-on:click="Reset">Reset</button>`
	`14`	`+ </div>`
	`15`	`+ <script type="text/javascript" src="computed.js"></script>`
	`16`	`+</body>`
	`17`	`+`
	`18`	`+</html>`

Comments

(0)