Skip to content

Commit 5c8f9c3

Browse files
wx-pswx-ps
committed
add observableMethods
1 parent f47ef07 commit 5c8f9c3

File tree

6 files changed

+80
-52
lines changed

6 files changed

+80
-52
lines changed

‎README.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,13 @@ var vm = new Vue({
241241
})
242242
```
243243

244-
#### `$createObservableFunction(functionName)`
244+
#### `$createObservableMethod(methodName)`
245245

246246
> This feature requires RxJS.
247247
248248
Convert function calls to observable sequence which emits the call arguments.
249249

250-
This is a prototype method added to instances. Use it to create a shared hot observable from a function name. The function body will assigned to vm.
250+
This is a prototype method added to instances. Use it to create a shared hot observable from a function name. The function will assigned as a vm method.
251251

252252
```html
253253
<custom-form :onSubmit="submitHandler"></custom-form>
@@ -256,11 +256,18 @@ This is a prototype method added to instances. Use it to create a shared hot obs
256256
var vm = new Vue({
257257
subscriptions () {
258258
return {
259-
formData: this.$createObservableFunction('submitHandler')
259+
// requires `share` operator
260+
formData: this.$createObservableMethod('submitHandler')
260261
}
261262
}
262263
})
263264
```
265+
Or, use the `observableMethods` convenience option:
266+
``` js
267+
new Vue({
268+
observableMethods: { submitHandler:'submitHandler$' }
269+
})
270+
```
264271
[example](https://github.com/vuejs/vue-rx/blob/master/example/counter-function.html)
265272

266273

‎example/counter-function.html

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,13 @@
77
<div id="app">
88
<div>{{ count }}</div>
99

10-
<!-- simple usage -->
11-
<button v-on:click="plus(500)">Add 500</button>
10+
<!-- callback declared on observableMethods -->
11+
<button v-on:click="muchMore(500)">Add 500</button>
1212

13-
<button v-stream:click="{ subject: plus$, data: minusDelta1, options:{once:true} }">Add on Click (Option once:true)</button>
14-
15-
<!-- you can also stream to the same subject with different events/data -->
16-
<button
17-
v-stream:click="{ subject: minus$, data: minusDelta1 }"
18-
v-stream:mousemove="{ subject: minus$, data: minusDelta2 }">
19-
Minus on Click &amp; Mousemove
20-
</button>
13+
<button v-on:click="minus(minusDelta1)"> Minus on Click </button>
2114

2215
<pre>{{ $data }}</pre>
2316

24-
<my-button v-stream:click="plus$"></my-button>
2517
</div>
2618

2719
<script>
@@ -35,32 +27,14 @@
3527
}
3628
},
3729

38-
components: {
39-
myButton: {
40-
template: '<button>MyButton</button>'
41-
}
42-
},
43-
44-
created () {
45-
//Speed up mousemove minus delta after 5s
46-
setTimeout(() => {
47-
this.minusDelta2 = -5
48-
}, 5000);
49-
50-
},
51-
52-
// declare dom stream Subjects
53-
domStreams: ['plus$', 'minus$'],
54-
55-
methods:{
56-
},
30+
// declare callback Subjects
31+
observableMethods: { muchMore:'muchMore$', minus:'minus$'}, // ['muchMore','minus'] as equal
5732

5833
subscriptions () {
5934
var count$ = Rx.Observable
6035
.merge(
61-
this.$createObservableFunction('plus'),
62-
this.plus$.map(() => 1),
63-
this.minus$.pluck('data')
36+
this.muchMore$,
37+
this.minus$
6438
)
6539
.startWith(0)
6640
.scan((total, change) => total + change)

‎src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import watchAsObservable from './methods/watchAsObservable'
77
import fromDOMEvent from './methods/fromDOMEvent'
88
import subscribeTo from './methods/subscribeTo'
99
import eventToObservable from './methods/eventToObservable'
10-
import createObservableFunction from './methods/createObservableFunction'
10+
import createObservableMethod from './methods/createObservableMethod'
1111

1212
export default function VueRx (Vue, Rx) {
1313
install(Vue, Rx)
@@ -17,7 +17,7 @@ export default function VueRx (Vue, Rx) {
1717
Vue.prototype.$fromDOMEvent = fromDOMEvent
1818
Vue.prototype.$subscribeTo = subscribeTo
1919
Vue.prototype.$eventToObservable = eventToObservable
20-
Vue.prototype.$createObservableFunction = createObservableFunction
20+
Vue.prototype.$createObservableMethod = createObservableMethod
2121
}
2222

2323
// auto install

‎src/methods/createObservableFunction.js renamed to ‎src/methods/createObservableMethod.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Rx, hasRx, warn } from '../util'
22

33
/**
4-
* @name Vue.prototype.$createObservableFunction
4+
* @name Vue.prototype.$createObservableMethod
55
* @description Creates an observable from a given function name.
6-
* @param {String} functionName Function name
6+
* @param {String} methodName Function name
77
* @param {Boolean} [passContext] Append the call context at the end of emit data?
88
* @return {Observable} Hot stream
99
*/
10-
export default function createObservableFunction (functionName, passContext) {
10+
export default function createObservableMethod (methodName, passContext) {
1111
if (!hasRx()) {
1212
return
1313
}
@@ -16,24 +16,24 @@ export default function createObservableFunction (functionName, passContext) {
1616
if (!Rx.Observable.prototype.share) {
1717
warn(
1818
`No 'share' operator. ` +
19-
`$createObservableFunction returns a shared hot observable. ` +
20-
`Try import 'rxjs/add/operator/share' for creating ${functionName}`,
19+
`$createObservableMethod returns a shared hot observable. ` +
20+
`Try import 'rxjs/add/operator/share' for creating ${methodName}`,
2121
vm
2222
)
2323
return
2424
}
2525

26-
if (vm[functionName] !== undefined) {
26+
if (vm[methodName] !== undefined) {
2727
warn(
2828
'Potential bug: ' +
29-
`Method ${functionName} already defined on vm and has been overwritten by $createObservableFunction.` +
30-
String(vm[functionName]),
29+
`Method ${methodName} already defined on vm and has been overwritten by $createObservableMethod.` +
30+
String(vm[methodName]),
3131
vm
3232
)
3333
}
3434

3535
const creator = function (observer) {
36-
vm[functionName] = function () {
36+
vm[methodName] = function () {
3737
const args = Array.from(arguments)
3838
if (passContext) {
3939
args.push(this)
@@ -47,7 +47,7 @@ export default function createObservableFunction (functionName, passContext) {
4747
}
4848
}
4949
return function () {
50-
delete vm[functionName]
50+
delete vm[methodName]
5151
}
5252
}
5353

‎src/mixin.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,19 @@ export default {
1414
}
1515
}
1616

17+
const observableMethods = vm.$options.observableMethods
18+
if (observableMethods) {
19+
if (Array.isArray(observableMethods)) {
20+
observableMethods.forEach(methodName => {
21+
vm[ methodName + '$' ] = vm.$createObservableMethod(methodName)
22+
})
23+
} else {
24+
Object.keys(observableMethods).forEach(methodName => {
25+
vm[observableMethods[methodName]] = vm.$createObservableMethod(methodName)
26+
})
27+
}
28+
}
29+
1730
let obs = vm.$options.subscriptions
1831
if (typeof obs === 'function') {
1932
obs = obs.call(vm)

‎test/test.js

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -318,10 +318,10 @@ test('$eventToObservable() with lifecycle hooks', done => {
318318
})
319319
})
320320

321-
test('$createObservableFunction() with no context', done => {
321+
test('$createObservableMethod() with no context', done => {
322322
const vm = new Vue({
323323
created () {
324-
this.$createObservableFunction('add')
324+
this.$createObservableMethod('add')
325325
.subscribe(function (param) {
326326
expect(param).toEqual('hola')
327327
done(param)
@@ -333,10 +333,10 @@ test('$createObservableFunction() with no context', done => {
333333
})
334334
})
335335

336-
test('$createObservableFunction() with muli params & context', done => {
336+
test('$createObservableMethod() with muli params & context', done => {
337337
const vm = new Vue({
338338
created () {
339-
this.$createObservableFunction('add', true)
339+
this.$createObservableMethod('add', true)
340340
.subscribe(function (param) {
341341
expect(param[0]).toEqual('hola')
342342
expect(param[1]).toEqual('mundo')
@@ -349,3 +349,37 @@ test('$createObservableFunction() with muli params & context', done => {
349349
vm.add('hola', 'mundo')
350350
})
351351
})
352+
353+
test('observableMethods mixin', done => {
354+
const vm = new Vue({
355+
observableMethods: ['add'],
356+
created () {
357+
this.add$
358+
.subscribe(function (param) {
359+
expect(param[0]).toEqual('Qué')
360+
expect(param[1]).toEqual('tal')
361+
done(param)
362+
})
363+
}
364+
})
365+
nextTick(() => {
366+
vm.add('Qué', 'tal')
367+
})
368+
})
369+
370+
test('observableMethods mixin', done => {
371+
const vm = new Vue({
372+
observableMethods: { 'add': 'plus$' },
373+
created () {
374+
this.plus$
375+
.subscribe(function (param) {
376+
expect(param[0]).toEqual('Qué')
377+
expect(param[1]).toEqual('tal')
378+
done(param)
379+
})
380+
}
381+
})
382+
nextTick(() => {
383+
vm.add('Qué', 'tal')
384+
})
385+
})

0 commit comments

Comments
 (0)