		@@ -5,2 +5,20 @@ # vue-rx

		### Installation

		- With global scripts: just make sure to include `vue-rx.js` after Vue.js and RxJS. It will be installed automatically.

		- With NPM:

		``` js
		var Vue = require('vue')
		var Rx = require('rx')
		var VueRx = require('vue-rx')

		// tada!
		Vue.use(VueRx, Rx)

		// The second argument is optional if you are not using RxJS but other generic observable implementations:
		Vue.use(VueRx)
		```

		### Usage
		@@ -18,6 +36,6 @@

		// now you can bind to Rx observables directly in `data`
		// provide Rx observables with the `subscriptions` option
		new Vue({
		el: '#app',
		data: {
		subscriptions: {
		msg: messageObservable
		@@ -28,4 +46,44 @@ }

		With global scripts: just make sure to include `vue-rx.js` after Vue.js and RxJS. It will be installed automatically.
		``` html
		<!-- bind to it normally in templates -->
		<div>{{ msg }}</div>
		```

		The `subscriptions` options can also take a function so that you can return unique observables for each component instance:

		``` js
		Vue.component('foo', {
		subscriptions: function () {
		return {
		msg: Rx.Observable.create(...)
		}
		}
		})
		```

		### Using with Alternative Observable Implementations

		You can use this plugin with other observable implementations, as long as it implements the `.subscribe` and `.dispose / .unsubscribe` interface. For example, you can use it with `most.js` or Falcor streams.

		### `$watchAsObservable`

		> This feature requires using RxJS.

		This is a prototype method added to instances. You can use it to create an observable from a value watcher:

		``` js
		created:function () {
		this.$watchAsObservable('a')
		.subscribe(function (val) {
		console.log('stream value', val)
		},function (err) {
		console.error(err)
		},function () {
		console.log('complete')
		})
		}
		```

		### Example

		See `/example` for a simple example.
		@@ -32,0 +90,0 @@

vue-rx.js

		(function () {
		function VueRx (Vue, Rx) {
		if (!Rx) {
		throw new Error(
		'vue-rx requires passing the Rx object to Vue.use() as the 2nd argument.'
		)
		var warn = Vue.util.warn \|\| function () {}

		function defineReactive (vm, key, val) {
		if (key in vm) {
		vm[key] = val
		} else {
		Vue.util.defineReactive(vm, key, val)
		}
		}

		var VueVersion = Number(Vue.version && Vue.version.split('.')[0])
		var initHook = VueVersion && VueVersion > 1 ? 'beforeCreate' : 'init'

		var mixin = {
		Vue.mixin({
		created () {
		var vm = this
		var obs = vm.$options.subscriptions
		if (typeof obs === 'function') {
		obs = obs.call(vm)
		}
		if (!obs) return
		vm._rxHandles = []
		Object.keys(obs).forEach(function (key) {
		defineReactive(vm, key, undefined)
		var ob = obs[key]
		if (!ob \|\| typeof ob.subscribe !== 'function') {
		warn('Invalid Observable found in rx option with key "' + key + '".', vm)
		return
		}
		vm._rxHandles.push(obs[key].subscribe(function (value) {
		vm[key] = value
		}))
		})
		},
		beforeDestroy: function () {
		@@ -24,28 +45,14 @@ if (this._rxHandles) {
		}
		}
		})

		mixin[initHook] = function init () {
		var self = this
		var dataFn = this.$options.data
		if (dataFn) {
		this.$options.data = function () {
		var raw = dataFn()
		Object.keys(raw).forEach(function (key) {
		var val = raw[key]
		if (val && val.subscribe instanceof Function) {
		raw[key] = null
		;(self._rxHandles \|\| (self._rxHandles = []))
		.push(val.subscribe(function (value) {
		self[key] = raw[key] = value
		}))
		}
		})
		return raw
		}
		Vue.prototype.$watchAsObservable = function (expOrFn, options) {
		if (!Rx) {
		warn(
		'$watchAsObservable requires passing the Rx to Vue.use() as the ' +
		'second argument.',
		this
		)
		return
		}
		}

		Vue.mixin(mixin)

		Vue.prototype.$watchAsObservable = function (expOrFn, options) {
		var self = this
		@@ -52,0 +59,0 @@

vue-rx - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics