Skip to content

Commit 3b681cf

Browse files
oskcaoskca
committed
add directive implemtantion
1 parent 9f7a09a commit 3b681cf

File tree

4 files changed

+95
-15
lines changed

4 files changed

+95
-15
lines changed

‎directive/derective.go

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ type Context struct {
2525
Params *js.Object `js:"params"`
2626
}
2727

28-
func makeUpdater(fn func(ctx *Context, newValue, oldValue *js.Object)) *js.Object {
28+
func makeUpdater(fn func(ctx *Context, val *js.Object)) *js.Object {
2929
return js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
3030
ctx := &Context{
3131
Object: this,
3232
}
33-
fn(ctx, args[0], args[1])
33+
fn(ctx, args[0])
3434
return nil
3535
})
3636
}
@@ -47,7 +47,7 @@ func makeBinder(fn func(*Context)) *js.Object {
4747

4848
// func Directive(
4949
// name string,
50-
// update func(ctx *Context, newValue, oldValue *js.Object),
50+
// update func(ctx *Context, val *js.Object),
5151
// ) {
5252
// fn := js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
5353
// ctx := &Context{
@@ -62,7 +62,7 @@ func makeBinder(fn func(*Context)) *js.Object {
6262
// func DirectiveEx(
6363
// name string,
6464
// bind func(ctx *Context),
65-
// update func(ctx *Context, newValue, oldValue *js.Object),
65+
// update func(ctx *Context, val *js.Object),
6666
// unbind func(ctx *Context),
6767
// ) {
6868
// fnInit := js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
@@ -95,15 +95,15 @@ func makeBinder(fn func(*Context)) *js.Object {
9595

9696
// func Directive(
9797
// name string,
98-
// update func(ctx *Context, newValue, oldValue *js.Object),
98+
// update func(ctx *Context, val *js.Object),
9999
// ) {
100100
// vue.Call("directive", name, makeUpdater(update))
101101
// }
102102

103103
// func DirectiveEx(
104104
// name string,
105105
// bind func(ctx *Context),
106-
// update func(ctx *Context, newValue, oldValue *js.Object),
106+
// update func(ctx *Context, val *js.Object),
107107
// unbind func(ctx *Context),
108108
// ) {
109109
// vue.Call("directive", name, js.M{
@@ -130,15 +130,15 @@ func makeBinder(fn func(*Context)) *js.Object {
130130
// able to manipulate that element and its children.
131131
// func ElementDirective(
132132
// name string,
133-
// update func(ctx *Context, newValue, oldValue *js.Object),
133+
// update func(ctx *Context, val *js.Object),
134134
// ) {
135135
// vue.Call("elementDirective", name, makeUpdater(update))
136136
// }
137137

138138
// func ElementDirectiveEx(
139139
// name string,
140140
// bind func(ctx *Context),
141-
// update func(ctx *Context, newValue, oldValue *js.Object),
141+
// update func(ctx *Context, val *js.Object),
142142
// unbind func(ctx *Context),
143143
// ) {
144144
// vue.Call("elementDirective", name, js.M{
@@ -187,7 +187,7 @@ type Directive struct {
187187
Priority int `js:"priority"`
188188
}
189189

190-
func New(name string, updater ...func(ctx *Context, newValue, oldValue *js.Object)) *Directive {
190+
func New(name string, updater ...func(ctx *Context, val *js.Object)) *Directive {
191191
d := &Directive{
192192
Name: name,
193193
Object: js.Global.Get("Object").New(),
@@ -208,7 +208,7 @@ func (d *Directive) SetUnBinder(fn func(ctx *Context)) *Directive {
208208
return d
209209
}
210210

211-
func (d *Directive) SetUpdater(fn func(ctx *Context, newValue, oldValue *js.Object)) *Directive {
211+
func (d *Directive) SetUpdater(fn func(ctx *Context, val *js.Object)) *Directive {
212212
d.Set("update", makeUpdater(fn))
213213
return d
214214
}

‎examples/directive/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Test Directive</title>
6+
</head>
7+
8+
<body>
9+
<div>Text:{{Text}}</div>
10+
<div>
11+
<input v-model="Text"></input>
12+
</div>
13+
<div v-myd="Text"></div>
14+
<script type="text/javascript" src="directive.js"></script>
15+
</body>
16+
17+
</html>

‎examples/directive/main.go

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
package main
2+
3+
import (
4+
"github.com/gopherjs/gopherjs/js"
5+
"github.com/oskca/gopherjs-vue"
6+
"github.com/oskca/gopherjs-vue/directive"
7+
)
8+
9+
type Model struct {
10+
*js.Object
11+
Text string `js:"Text"`
12+
}
13+
14+
func main() {
15+
d := directive.New("myd")
16+
d.SetUpdater(func(ctx *directive.Context, val *js.Object) {
17+
println("directive name:", ctx.Name)
18+
println("directive exp:", ctx.Expression)
19+
println("directive values:", val)
20+
}).Register()
21+
22+
m := &Model{
23+
Object: js.Global.Get("Object").New(),
24+
}
25+
m.Text = "a string"
26+
vue.New("body", m)
27+
}

‎extra.go

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import (
44
"github.com/gopherjs/gopherjs/js"
55
)
66

7-
func Directive(name string, opt js.M) {
8-
vue.Call("directive", name, opt)
9-
}
10-
117
func Filter(name string, fn func(*js.Object) *js.Object) {
128
vue.Call("filter", name, fn)
139
}
@@ -17,7 +13,47 @@ func Filter(name string, fn func(*js.Object) *js.Object) {
1713
// definition String | Node optional
1814
// Register or retrieve a global partial.
1915
// The definition can be a template string, a querySelector that starts with #,
20-
// a DOM element (whose innerHTML will be used as the template string), or a DocumentFragment.
16+
// a DOM element (whose innerHTML will be used as the template string),
17+
// or a DocumentFragment.
2118
func Partial(name, definition string) {
2219
vue.Call("partial", name, definition)
2320
}
21+
22+
// Defer the callback to be executed after the next DOM update cycle.
23+
// Use it immediately after you’ve changed some data to wait for the DOM update.
24+
func NextTick(cb func()) {
25+
vue.Call("nextTick", cb)
26+
}
27+
28+
// Vue.set( object, key, value )
29+
//
30+
// Arguments:
31+
//
32+
// {Object} object
33+
// {String} key
34+
// {*} value
35+
// Returns: the set value.
36+
//
37+
// Set a property on an object. If the object is reactive,
38+
// ensure the property is created as a reactive property and
39+
// trigger view updates. This is primarily used to get
40+
// around the limitation that Vue cannot detect property additions.
41+
func Set(obj, key, value interface{}) {
42+
vue.Call("set", obj, key, value)
43+
}
44+
45+
// Vue.delete( object, key )
46+
//
47+
// Arguments:
48+
//
49+
// {Object} object
50+
// {String} key
51+
// Usage:
52+
//
53+
// Delete a property on an object.
54+
// If the object is reactive, ensure the deletion triggers view updates.
55+
// This is primarily used to get around the limitation that
56+
// Vue cannot detect property deletions, but you should rarely need to use it.
57+
func Delete(obj, key interface{}) {
58+
vue.Call("delete", obj, key)
59+
}

0 commit comments

Comments
 (0)