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 86ef847

Browse files
committed
using vue.Option to update vue.go and component.go
1 parent 3ca2bfc commit 86ef847

File tree

2 files changed

+60
-69
lines changed

2 files changed

+60
-69
lines changed

‎component.go‎

Lines changed: 42 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,42 @@ type pool struct {
1616

1717
// Component is actually an Extended Vue SubClass,
1818
// which acts as a Component constructor in VueJS world
19+
// thus you can use Component.New to create a
20+
// preConfigured VueJS instance(*ViewModel).
21+
type Component struct {
22+
*ViewModel
23+
}
24+
25+
// New create the component instance
26+
func (c *Component) New() *ViewModel {
27+
return newViewModel(c.Object.New())
28+
}
29+
30+
func newComponent(o *js.Object) *Component {
31+
return &Component{
32+
ViewModel: newViewModel(o),
33+
}
34+
}
35+
36+
// Register register Component:c in the global namespace
37+
func (c *Component) Register(name string) *Component {
38+
vue.Call("component", name, c)
39+
return c
40+
}
41+
42+
func GetComponent(name string) *Component {
43+
return newComponent(vue.Call("component", name))
44+
}
45+
46+
// NewComponent creates and registers a named global Component
1947
//
20-
// CreateComponent creats a new VueJS component
21-
func CreateComponent(
48+
// vmCreator should return a gopherjs struct pointer. see New for more details
49+
func NewComponent(
2250
vmCreator func() (structPtr interface{}),
23-
templateOrSharpId string,
51+
templateStr string,
2452
replaceMountPoint ...bool,
25-
) *Vue {
53+
) *Component {
54+
// args
2655
idx := len(creatorPool)
2756
creatorPool = append(creatorPool, new(pool))
2857
creatorPool[idx].creator = vmCreator
@@ -34,57 +63,18 @@ func CreateComponent(
3463
p.counter += 1
3564
return p.structPtr
3665
}
37-
// args
3866
replace := true
3967
if len(replaceMountPoint) > 0 {
4068
replace = replaceMountPoint[0]
4169
}
42-
// create the VueInstance
43-
com := Extend(js.M{
44-
"data": vmfn,
45-
"init": js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} {
46-
// set methods dynamicly before VueInstance doing all the other init
47-
this.Get("$options").Set("methods", js.MakeWrapper(vmfn()))
48-
// register this component instance to vMap
49-
vMap[vmfn()] = &Vue{Object: this}
50-
return nil
51-
}),
52-
"template": templateOrSharpId,
53-
"replace": replace,
70+
// opts
71+
opt := NewOption()
72+
opt.Data = vmfn
73+
opt.Template = templateStr
74+
opt.Replace = replace
75+
opt.OnLifeCycleEvent(EvtInit, func(vm *ViewModel) {
76+
vm.Options.Set("methods", js.MakeWrapper(vmfn()))
77+
vMap[vmfn()] = vm
5478
})
55-
return com
56-
}
57-
58-
// Extend Create a "subclass" of the base Vue constructor which is a `Component`
59-
// The argument should be an object containing component options.
60-
// The special cases to note here are el and data options
61-
// - they must be functions when used with Vue.extend().
62-
func Extend(opt js.M) *Vue {
63-
return &Vue{
64-
Object: vue.Call("extend", opt),
65-
}
66-
}
67-
68-
func RegisterComponent(name string, component *Vue) *Vue {
69-
vue.Call("component", name, component.Object)
70-
return component
71-
}
72-
73-
func GetComponent(name string) *Vue {
74-
return &Vue{
75-
Object: vue.Call("component", name),
76-
}
77-
}
78-
79-
// Component creates and registers a named global component. (automatically call Vue.extend)
80-
//
81-
// vmCreator should return a gopherjs struct pointer. see New for more details
82-
func Component(
83-
name string,
84-
vmCreator func() (structPtr interface{}),
85-
templateOrSharpId string,
86-
replaceMountPoint ...bool,
87-
) *Vue {
88-
com := CreateComponent(vmCreator, templateOrSharpId, replaceMountPoint...)
89-
return RegisterComponent(name, com)
79+
return opt.NewComponent()
9080
}

‎vue.go‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import (
88

99
var (
1010
vue = js.Global.Get("Vue")
11-
vMap = make(map[interface{}]*Vue, 0)
11+
vMap = make(map[interface{}]*ViewModel, 0)
1212
)
1313

1414
// type Value represents the VueJS wrapped observed Array or Object
@@ -36,7 +36,7 @@ type Value struct {
3636
}
3737

3838
// type Vue represents the JavaScript side VueJS instance or VueJS component
39-
type Vue struct {
39+
type ViewModel struct {
4040
*js.Object
4141
///////////////////////////// Instance Properties
4242
// vm.$data
@@ -270,7 +270,7 @@ type Vue struct {
270270
// on an already mounted instance will have no effect.
271271
// The method returns the instance itself so you can chain other
272272
// instance methods after it.
273-
Mount func(elementOrselector string) *Vue `js:"$mount"`
273+
Mount func(elementOrselector string) *ViewModel `js:"$mount"`
274274

275275
// vm.$destroy( [remove] )
276276
// remove Boolean optional
@@ -356,35 +356,36 @@ type Vue struct {
356356
//
357357
// These rules are required for VueJS dependency system to work correctly.
358358
//
359-
// You can get this *Vue instance through `vue.GetVM(structPtr)`
359+
// You can get this *ViewModel instance through `vue.GetVM(structPtr)`
360360
// which acts as `this` of the VueJS(javascript) side of world
361-
func New(selectorOrElementOrFunction interface{}, structPtr interface{}) *Vue {
362-
o := vue.New(js.M{
363-
"el": selectorOrElementOrFunction,
364-
"data": structPtr,
365-
"methods": js.MakeWrapper(structPtr),
366-
})
367-
vm := &Vue{
368-
Object: o,
369-
}
361+
func New(selectorOrElementOrFunction interface{}, structPtr interface{}) *ViewModel {
362+
opt := NewOption()
363+
opt.El = selectorOrElementOrFunction
364+
opt.SetDataWithMethods(structPtr)
365+
vm := opt.NewViewModel()
370366
vMap[structPtr] = vm
371367
return vm
372368
}
373369

370+
func newViewModel(o *js.Object) *ViewModel {
371+
return &ViewModel{
372+
Object: o,
373+
}
374+
}
375+
374376
// GetVM returns coresponding VueJS instance from a gopherjs struct pointer
375377
// (the underlying ViewModel data), this function is mainly in
376378
// gopherjs struct method functions to reference the `VueJS instance`
377-
func GetVM(structPtr interface{}) *Vue {
379+
func GetVM(structPtr interface{}) *ViewModel {
378380
vm, ok := vMap[structPtr]
379381
if !ok {
380-
println("Vue not registerd yet:", structPtr)
381-
panic("Vue not registerd yet")
382+
panic("GetVM: Vue not registerd yet")
382383
}
383384
return vm
384385
}
385386

386387
// WatchEx using a simpler form to do Vue.$watch
387-
func (v *Vue) Watch(expression string, callback func(newVal *js.Object)) (unwatcher func()) {
388+
func (v *ViewModel) Watch(expression string, callback func(newVal *js.Object)) (unwatcher func()) {
388389
obj := v.Call("$watch", expression, callback)
389390
return func() {
390391
obj.Invoke()

0 commit comments

Comments
(0)

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