add computed example

oskca · oskca · commit 1ae32cf85784 · 2017-01-22T17:52:12.000+08:00
diff --git a/examples/computed/computed.go b/examples/computed/computed.go
@@ -0,0 +1,48 @@
+package main
+
+import (
+	"github.com/gopherjs/gopherjs/js"
+	"github.com/oskca/gopherjs-vue"
+)
+
+type Model struct {
+	*js.Object        // this is needed for bidirectional data bindings
+	IntValue   int    `js:"integer"`
+	Str        string `js:"str"`
+}
+
+// this would be recognized as Inc in html
+func (m *Model) Inc() {
+	m.IntValue += 1
+	println("inc called")
+}
+
+// this would be recognized as Repeat in html
+func (m *Model) Repeat() {
+	m.Str = m.Str + m.Str
+}
+
+// this would be recognized as Reset in html
+func (m *Model) Reset() {
+	m.Str = "a string "
+}
+
+func main() {
+	// model
+	m := &Model{
+		Object: js.Global.Get("Object").New(),
+	}
+	// field assignment is required in this way to make data passing works
+	m.IntValue = 100
+	m.Str = "a string"
+	// options
+	o := vue.NewOption()
+	o.SetDataWithMethods(m)
+	o.AddComputed("double", func(vm *vue.ViewModel) interface{} {
+		println("reading computed double")
+		i := vm.Data.Get("integer").Int()
+		return i * 2
+	})
+	v := o.NewViewModel()
+	v.Mount("#app")
+}
diff --git a/examples/computed/index.html b/examples/computed/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+    <div id="app" v-cloak>
+        <div>integer: {{ integer }}
+            <input v-model="integer"></input>
+        </div>
+        <div>double: {{ double }} </div>
+        <div>str: {{ str }} </div>
+        <button v-on:click="Inc">Increase</button>
+        <button v-on:click="Repeat">Repeat</button>
+        <button v-on:click="Reset">Reset</button>
+    </div>
+    <script type="text/javascript" src="computed.js"></script>
+</body>
+
+</html>
