-
Notifications
You must be signed in to change notification settings - Fork 1
/
vue-meteor-data.js
131 lines (113 loc) · 3.03 KB
/
vue-meteor-data.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/**
* Easy subscriptions and reactive queries for Vue and Meteor
*
* Installation:
* var VueMeteorData = require ('vue-meteor-data');
* Vue.mixin(VueMeteorData)
*
* Usage example 1:
* module.exports = {
* reactiveData : {
* tasks: function () {
* return Tasks.find().fetch()
* }
* },
*
* created: function(){
* this.subscribe('tasks/all');
* }
* }
*
* Usage example 2:
* module.exports = {
* created: function(){
* this.subscribe('tasks/all');
* this.autorun(function(){
* this.$set('tasks', Tasks.find().fetch())
* }.bind(this))
* }
* }
*/
var Vue = require('vue')
module.exports = {
created: function () {
var vm = this;
this._trackerHandles = [];
/**
* Wrap all queries in Tracker.autorun
* Usage example:
* reactiveData: {
* tasks: function (component) {
* this.subscribe('myPubliation');
* return Tasks.find().fetch()
* }
* }
*/
var reactiveData = this.$options.reactiveData
if (reactiveData) {
for (var key in reactiveData) {
var reactiveFunction = reactiveData[ key ].bind(vm);
Vue.util.defineReactive(vm, key, null);
(function(key, reactiveFunction){
vm.autorun(function () {
vm.$set(key, reactiveFunction(vm));
});
})(key, reactiveFunction);
}
}
},
destroyed: function () {
//Stop all reactivity when view is destroyed.
this._trackerHandles.forEach(function (tracker) {
tracker.stop();
})
},
methods: {
/**
* Subscription that automatically stop when view is destroyed
* Usage example:
* created: function(){
* this.subscription("myPublication")
* }
* @returns {*}
*/
subscribe: function () {
var handle = Meteor.subscribe.apply(this, arguments);
this._trackerHandles.push(handle);
return handle;
},
/**
* Autorun - automatically stops when view is destroyed
*
* Usage example:
* created: function(){
* var handle = this.autorun(function(){
* this.myvar = myReactiveFunction();
* }.bind(this);
* ...
* handle.stop();
* }
* @param reactiveFunction
* @returns {{_meteor: Tracker.Computation, _vue: Function, stop: handle.stop}}
*/
autorun: function (reactiveFunction) {
var vm = this;
var handle = {
_meteor: {}, //placeholder
_vue : function () {
}, //placeholder
stop : function () {
this._meteor.stop();
this._vue();
}
};
handle._meteor = Tracker.autorun(function () {
//calls watcher.teardown() to avoid creation of duplicate watchers
handle._vue()
handle._vue = vm.$watch(reactiveFunction)
});
this._trackerHandles.push(handle);
return handle;
}
}
}