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 6d5deff

Browse files
committed
update vue.Directive to VueJS 2.0
1 parent 037e2ba commit 6d5deff

File tree

5 files changed

+76
-93
lines changed

5 files changed

+76
-93
lines changed

‎directive.go‎

Lines changed: 54 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,67 @@
11
package vue
22

3-
import (
4-
"github.com/gopherjs/gopherjs/js"
5-
)
3+
import "github.com/gopherjs/gopherjs/js"
4+
import "github.com/oskca/gopherjs-dom"
65

7-
type DirectiveContext struct {
6+
type DirectiveBinding struct {
87
*js.Object
9-
// el: the element the directive is bound to.
10-
El *js.Object `js:"el"`
11-
// vm: the context ViewModel that owns this directive.
12-
Vm *ViewModel `js:"vm"`
8+
// name: the name of the directive, without the prefix.
9+
Name string `js:"name"`
10+
// value: The value passed to the directive. For example in v-my-directive="1 + 1", the value would be 2.
11+
Value string `js:"value"`
12+
// oldValue: The previous value, only available in update and componentUpdated. It is available whether or not the value has changed.
13+
OldValue string `js:"oldValue"`
1314
// expression: the expression of the binding, excluding arguments and filters.
1415
Expression string `js:"expression"`
1516
// arg: the argument, if present.
1617
Arg string `js:"arg"`
17-
// name: the name of the directive, without the prefix.
18-
Name string `js:"name"`
1918
// modifiers: an object containing modifiers, if any.
2019
Modifiers *js.Object `js:"modifiers"`
21-
// descriptor: an object that contains the parsing result of the entire directive.
22-
Descriptor *js.Object `js:"descriptor"`
23-
// params: an object containing param attributes. Explained below.
24-
Params *js.Object `js:"params"`
2520
}
2621

27-
func makeUpdater(fn func(ctx *DirectiveContext, val *js.Object)) *js.Object {
28-
return js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
29-
ctx := &DirectiveContext{
30-
Object: this,
31-
}
32-
fn(ctx, args[0])
33-
return nil
34-
})
35-
}
36-
37-
func makeBinder(fn func(*DirectiveContext)) *js.Object {
38-
return js.MakeFunc(func(this *js.Object, args []*js.Object) interface{} {
39-
ctx := &DirectiveContext{
40-
Object: this,
41-
}
42-
fn(ctx)
43-
return nil
44-
})
45-
}
22+
// DirectiveCallback can be used in every directive callback functions
23+
type DirectiveCallback func(el *dom.Element, b *DirectiveBinding, vNode, oldVnode *js.Object)
4624

4725
type Directive struct {
4826
*js.Object
49-
Name string
50-
// advanced options
51-
// Custom directive can provide a params array,
52-
// and the Vue compiler will automatically extract
53-
// these attributes on the element that the directive is bound to.
54-
Params []string `js:"params"`
55-
// If your custom directive is expected to be used on an Object,
56-
// and it needs to trigger update when a nested property inside
57-
// the object changes, you need to pass in deep: true in your directive definition.
58-
Deep bool `js:"deep"`
59-
// If your directive expects to write data back to
60-
// the Vue instance, you need to pass in twoWay: true.
61-
// This option allows the use of this.set(value) inside
62-
// the directive:If your directive expects to write data back to
63-
// the Vue instance, you need to pass in twoWay: true.
64-
// This option allows the use of this.set(value) inside the directive
65-
TwoWay bool `js:"twoWay"`
66-
// Passing in acceptStatement:true enables
67-
// your custom directive to accept inline statements like v-on does
68-
AcceptStatement bool `js:"acceptStatement"`
69-
// Vue compiles templates by recursively walking the DOM tree.
70-
// However when it encounters a terminal directive,
71-
// it will stop walking that element’s children.
72-
// The terminal directive takes over the job of compiling the element and
73-
// its children. For example, v-if and v-for are both terminal directives.
74-
Terminal bool `js:"terminal"`
75-
// You can optionally provide a priority number for your directive.
76-
// If no priority is specified, a default priority will be used
77-
// - 1000 for normal directives and 2000 for terminal directives.
78-
// A directive with a higher priority will be processed earlier than
79-
// other directives on the same element. Directives with
80-
// the same priority will be processed in the order they appear in
81-
// the element’s attribute list, although that order is not
82-
// guaranteed to be consistent in different browsers.
83-
Priority int `js:"priority"`
27+
// // Name string
28+
// // advanced options
29+
// // Custom directive can provide a params array,
30+
// // and the Vue compiler will automatically extract
31+
// // these attributes on the element that the directive is bound to.
32+
// Params []string `js:"params"`
33+
// // If your custom directive is expected to be used on an Object,
34+
// // and it needs to trigger update when a nested property inside
35+
// // the object changes, you need to pass in deep: true in your directive definition.
36+
// Deep bool `js:"deep"`
37+
// // If your directive expects to write data back to
38+
// // the Vue instance, you need to pass in twoWay: true.
39+
// // This option allows the use of this.set(value) inside
40+
// // the directive:If your directive expects to write data back to
41+
// // the Vue instance, you need to pass in twoWay: true.
42+
// // This option allows the use of this.set(value) inside the directive
43+
// TwoWay bool `js:"twoWay"`
44+
// // Passing in acceptStatement:true enables
45+
// // your custom directive to accept inline statements like v-on does
46+
// AcceptStatement bool `js:"acceptStatement"`
47+
// // Vue compiles templates by recursively walking the DOM tree.
48+
// // However when it encounters a terminal directive,
49+
// // it will stop walking that element’s children.
50+
// // The terminal directive takes over the job of compiling the element and
51+
// // its children. For example, v-if and v-for are both terminal directives.
52+
// Terminal bool `js:"terminal"`
53+
// // You can optionally provide a priority number for your directive.
54+
// // If no priority is specified, a default priority will be used
55+
// // - 1000 for normal directives and 2000 for terminal directives.
56+
// // A directive with a higher priority will be processed earlier than
57+
// // other directives on the same element. Directives with
58+
// // the same priority will be processed in the order they appear in
59+
// // the element’s attribute list, although that order is not
60+
// // guaranteed to be consistent in different browsers.
61+
// Priority int `js:"priority"`
8462
}
8563

86-
func NewDirective(updater ...func(ctx*DirectiveContext, val *js.Object)) *Directive {
64+
func NewDirective(updater ...func(el*js.Object, b*DirectiveBinding, val *js.Object)) *Directive {
8765
d := &Directive{
8866
Object: js.Global.Get("Object").New(),
8967
}
@@ -93,18 +71,18 @@ func NewDirective(updater ...func(ctx *DirectiveContext, val *js.Object)) *Direc
9371
return d
9472
}
9573

96-
func (d *Directive) SetBinder(fn func(ctx*DirectiveContext)) *Directive {
97-
d.Set("bind", makeBinder(fn))
74+
func (d *Directive) SetBinder(fn func(b*DirectiveBinding)) *Directive {
75+
d.Set("bind", fn)
9876
return d
9977
}
10078

101-
func (d *Directive) SetUnBinder(fn func(ctx*DirectiveContext)) *Directive {
102-
d.Set("unbind", makeBinder(fn))
79+
func (d *Directive) SetUnBinder(fn func(b*DirectiveBinding)) *Directive {
80+
d.Set("unbind", fn)
10381
return d
10482
}
10583

106-
func (d *Directive) SetUpdater(fn func(ctx*DirectiveContext, val *js.Object)) *Directive {
107-
d.Set("update", makeUpdater(fn))
84+
func (d *Directive) SetUpdater(fn func(el*js.Object, b*DirectiveBinding, val *js.Object)) *Directive {
85+
d.Set("update", fn)
10886
return d
10987
}
11088

@@ -131,7 +109,7 @@ type ElementDirective struct {
131109
*Directive
132110
}
133111

134-
func NewElementDirective(updater ...func(ctx*DirectiveContext, val *js.Object)) *ElementDirective {
112+
func NewElementDirective(updater ...func(el*js.Object, b*DirectiveBinding, val *js.Object)) *ElementDirective {
135113
d := &ElementDirective{
136114
Directive: NewDirective(updater...),
137115
}

‎examples/component/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@
66
</head>
77

88
<body>
9-
first:
10-
<my-el></my-el>
11-
second:
12-
<my-el></my-el>
9+
<div id="app">
10+
first:
11+
<my-el></my-el>
12+
second:
13+
<my-el></my-el>
14+
</div>
1315
<script type="text/javascript" src="component.js"></script>
1416
</body>
1517

‎examples/component/main.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ type controller struct {
3131

3232
func main() {
3333
vue.NewComponent(New, template).Register("my-el")
34-
vm := vue.New("body", new(controller))
34+
vm := vue.New("#app", new(controller))
3535
js.Global.Set("vm", vm)
3636
println("vm:", vm)
3737
}

‎examples/directive/index.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@
66
</head>
77

88
<body>
9-
<div>Text:{{Text}}</div>
10-
<div>
11-
<input v-model="Text"></input>
9+
<div id="app">
10+
<div>Text:{{Text}}</div>
11+
<div>
12+
<input v-model="Text"></input>
13+
</div>
14+
<div v-myd="Text"></div>
15+
<div>Time:{{Time}}</div>
16+
<div>
17+
<input v-model="Time"></input>
18+
</div>
19+
<div v-myd="Time"></div>
1220
</div>
13-
<div v-myd="Text"></div>
14-
<div>Time:{{Time}}</div>
15-
<div>
16-
<input v-model="Time"></input>
17-
</div>
18-
<div v-myd="Time"></div>
1921
<script type="text/javascript" src="directive.js"></script>
2022
</body>
2123

‎examples/directive/main.go‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
package main
22

33
import (
4+
"time"
5+
46
"github.com/gopherjs/gopherjs/js"
57
"github.com/oskca/gopherjs-vue"
6-
"time"
78
)
89

910
type Model struct {
@@ -14,7 +15,7 @@ type Model struct {
1415

1516
func main() {
1617
d := vue.NewDirective()
17-
d.SetUpdater(func(ctx *vue.DirectiveContext, val *js.Object) {
18+
d.SetUpdater(func(el*js.Object, ctx *vue.DirectiveBinding, val *js.Object) {
1819
println("directive name:", ctx.Name)
1920
println("directive exp:", ctx.Expression)
2021
println("directive values:", val)
@@ -25,5 +26,5 @@ func main() {
2526
}
2627
m.Text = "a string"
2728
m.Time = time.Now().String()
28-
vue.New("body", m)
29+
vue.New("#app", m)
2930
}

0 commit comments

Comments
(0)

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