Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 633eed7

Browse files
committed
remove type vue.Value from gopherjs-vue, using seperate functions to handle VueJS warpped array functions
1 parent 6d5deff commit 633eed7

File tree

3 files changed

+62
-47
lines changed

3 files changed

+62
-47
lines changed

‎examples/features/features.go‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,27 @@ package main
22

33
import (
44
"fmt"
5-
"github.com/gopherjs/gopherjs/js"
6-
"github.com/oskca/gopherjs-vue"
75
"math/rand"
86
"strings"
97
"time"
8+
9+
"github.com/gopherjs/gopherjs/js"
10+
"github.com/oskca/gopherjs-vue"
1011
)
1112

1213
// no *js.Object struct can only be manipulated by ViewModel.methods
1314
type Todo struct {
14-
Time time.Time
15-
Content string
15+
*js.Object
16+
Time string `js:"time"`
17+
Content string `js:"content"`
1618
}
1719

1820
func NewTodo(content string) *Todo {
1921
t := &Todo{
20-
Time: time.Now(),
21-
Content: content,
22+
Object: js.Global.Get("Object"),
2223
}
24+
t.Time = time.Now().String()
25+
t.Content = content
2326
return t
2427
}
2528

@@ -51,16 +54,21 @@ func (m *Model) Repeat() {
5154
// for i, key := range js.Keys(vm.Object) {
5255
// println(i, key)
5356
// }
54-
println("integer from vm:", vm.Get("integer").Int())
57+
// println("integer from vm:", vm.Get("integer").Int())
58+
println("integer from vm:", vm.Data.Get("integer").Int())
5559
}
5660

5761
func (m *Model) PopulateTodo() {
5862
// using append would cause GopherJS internalization problems
5963
// so it's better to use VueJS ops to manipulates the array
60-
// m.Todos = append(m.Todos, NewTodo(m.Str))
61-
vm := vue.GetVM(m)
62-
todos := vm.Get("todos")
63-
todos.Unshift(NewTodo(m.Str))
64+
m.Todos = append(m.Todos, NewTodo(m.Str))
65+
// vm := vue.GetVM(m)
66+
// todos := vm.Get("todos")
67+
// println("ok 0", todos, todos.Get("length"))
68+
// println("ok 1", todos, todos.Length())
69+
// println("ok 2", m.Todos, len(m.Todos))
70+
// vue.Unshift(todos, NewTodo(m.Str))
71+
// vue.Push(todos, NewTodo(m.Str))
6472
}
6573

6674
func (m *Model) MapTodos() {
@@ -81,7 +89,7 @@ func (m *Model) ShiftTodo() {
8189
// m.Todos = m.Todos[1:]
8290
vm := vue.GetVM(m)
8391
todos := vm.Get("todos")
84-
todos.Shift()
92+
vue.Shift(todos)
8593
}
8694

8795
func (m *Model) WhatTF() string {
@@ -108,6 +116,7 @@ func main() {
108116
m.IntValue = 100
109117
m.Str = "a string"
110118
m.List = []int{1, 2, 3, 4}
119+
// m.Todos = []*Todo{NewTodo("Good Day")}
111120
m.Todos = []*Todo{}
112121
m.AllItems = []string{"A", "B", "C", "D", "John", "Bill"}
113122
m.CheckedItems = []string{"A", "B"}

‎examples/features/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@
2020
<template v-for="item in AllItems">
2121
<label style="display: inline;">
2222
{{item}}
23-
<input type="checkbox" id="{{item}}" value="{{item}}" v-model="CheckedItems" />
23+
<input type="checkbox" :id="item" :value="item" v-model="CheckedItems" />
2424
</label>
2525
</template>
2626
<div>
27-
<span>CheckedItems: {{ CheckedItems | json }}</span>
27+
<span>CheckedItems: {{ CheckedItems }}</span>
2828
</div>
2929
<input v-model="integer">
3030
<button @click="Inc">Inc</button>
@@ -36,12 +36,14 @@
3636
{{ item }}
3737
</li>
3838
<input v-model="str" />
39+
<br>
40+
Todos:<br>
3941
<ul v-for="todo in todos">
40-
<li>{{todo.Time | timeFormat}} - {{todo.Content}}</li>
42+
<li>{{todo.time }} - {{todo.content}}</li>
4143
</ul>
4244
<p>{{str}}</p>
4345
</div>
4446
<script type="text/javascript" src="features.js"></script>
45-
</body>
47+
</bodyk
4648

4749
</html>

‎vue.go‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,42 @@ var (
1111
vMap = make(map[interface{}]*ViewModel, 0)
1212
)
1313

14-
// type Value represents the VueJS wrapped observed Array or Object
15-
// the wrapped methods can be used to trigger view update.
16-
// `*Value` is usually returned by calling `ViewModel.Get()`
17-
type Value struct {
18-
/////// Normal value operation as js.Object
19-
*js.Object
14+
// Add in the bottom of the array
15+
func Push(obj *js.Object, any interface{}) (idx int) {
16+
return obj.Call("push", any).Int()
17+
}
18+
19+
// Remove in the bottom of the array
20+
func Pop(obj *js.Object) (idx int) {
21+
return obj.Call("pop").Int()
22+
}
23+
24+
//Add in the front of the array
25+
func Unshift(obj *js.Object, any interface{}) (idx int) {
26+
return obj.Call("unshift", any).Int()
27+
}
28+
29+
//Remove in the front of the array
30+
func Shift(obj *js.Object) (idx int) {
31+
return obj.Call("shift").Int()
32+
}
33+
34+
//array slice operation
35+
// index required,position to add to(remove from),negative means reverse
36+
// howmany required,number of items to remove, 0 means no remove
37+
// items... optional,add new items to the array
38+
func Splice(obj *js.Object, index, howmany int, items ...interface{}) *js.Object {
39+
args := []interface{}{index, howmany}
40+
args = append(args, items...)
41+
return obj.Call("splice", args...)
42+
}
2043

21-
/////// VueJS wrapped Array Operations
22-
/////// in fact normal gopherjs slice ops would effect
23-
/////// the save way
24-
// Add in the bottom of the array
25-
Push func(any interface{}) (idx int) `js:"push"`
26-
// Remove in the bottom of the array
27-
Pop func() (idx int) `js:"pop"`
28-
//Add in the front of the array
29-
Unshift func(any interface{}) (idx int) `js:"unshift"`
30-
//Remove in the front of the array
31-
Shift func() (idx int) `js:"shift"`
32-
//array slice operation
33-
// index required,position to add to(remove from),negative means reverse
34-
// howmany required,number of items to remove, 0 means no remove
35-
// items... optional,add new items to the array
36-
Splice func(index, howmany int, items ...interface{}) *js.Object `js:"splice"`
37-
Sort func(sorter func(a, b *js.Object) int) *js.Object `js:"sort"`
38-
Reverse func() *js.Object `js:"reverse"`
44+
func Sort(obj *js.Object, sorter func(a, b *js.Object) int) *js.Object {
45+
return obj.Call("sort", sorter)
46+
}
47+
48+
func Reverse(obj *js.Object) *js.Object {
49+
return obj.Call("reverse")
3950
}
4051

4152
// type Vue represents the JavaScript side VueJS instance or VueJS component
@@ -135,13 +146,6 @@ type ViewModel struct {
135146
// vm.$eval('msg | uppercase') // -> 'HELLO'
136147
Eval func(expression string) *js.Object `js:"$eval"`
137148

138-
// vm.$get( expression )
139-
// expression String
140-
// Retrieve a value from the Vue instance given an expression.
141-
// Expressions that throw errors will be suppressed
142-
// and return undefined.
143-
Get func(expression string) *Value `js:"$get"`
144-
145149
// vm.$set( keypath, value )
146150
// keypath String
147151
// value *

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /