Add feature watchAsObservable (#11)

* watch as observable

* use rx5

* support 4.0

Author: regou

example/example.html

@@ -1,5 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.lite.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.1/Rx.min.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="../vue-rx.js"></script>
 
@@ -29,18 +29,18 @@ <h1>{{ results.term }}</h1>
   .filter(function (text) {
     return text.length > 2
   })
-  .debounce(500)
+  .debounceTime(500)
   .distinctUntilChanged()
-  .flatMapLatest(function (term) {
-    return $.ajax({
+  .switchMap(function (term) {
+    return Rx.Observable.fromPromise($.ajax({
       url: 'http://en.wikipedia.org/w/api.php',
       dataType: 'jsonp',
       data: {
         action: 'opensearch',
         format: 'json',
         search: term
       }
-    }).promise()
+    }).promise())
   })
   // format the final data a little bit
   .map(function (res) {
@@ -60,7 +60,22 @@ <h1>{{ results.term }}</h1>
 var vm = new Vue({
   el: '#el',
   data: {
+    a:5,
     results: dataSource
   }
-})
+});
+
+
+setTimeout(function () {
+  vm.a = 17;
+},5000)
+
+  vm.$watchAsObservable('a')
+          .subscribe(function (val) {
+            console.log('stream value',val);
+          },function (err) {
+            console.error(err)
+          },function () {
+            console.log('complete');
+          })
 </script>

vue-rx.js

@@ -1,5 +1,5 @@
 (function () {
-  function VueRx (Vue) {
+  function VueRx (Vue,Rx) {
     var VueVersion = Number(Vue.version && Vue.version.split('.')[0])
     var initHook = VueVersion && VueVersion > 1 ? 'beforeCreate' : 'init'
 
@@ -39,11 +39,38 @@
     }
 
     Vue.mixin(mixin)
+
+
+    Vue.prototype.$watchAsObservable = function (expOrFn,options) {
+      var self = this;
+
+      var obs$ = Rx.Observable.create(function (observer) {
+        // Create function to handle old and new Value
+        function listener (newValue, oldValue) {
+          observer.next({ oldValue: oldValue, newValue: newValue });
+        }
+
+        // Returns function which disconnects the $watch expression
+        var disposable;
+        if(Rx.Subscription){//Rx5
+          disposable = new Rx.Subscription(self.$watch(expOrFn,listener,options));
+        }else{//Rx4
+          disposable = Rx.Disposable.create(self.$watch(expOrFn,listener,options));
+        }
+
+        return disposable;
+      }).publish().refCount();
+
+      (self._rxHandles || (self._rxHandles = [])).push(obs$);
+
+      return obs$;
+    }
+
   }
 
   // auto install
   if (typeof Vue !== 'undefined') {
-    Vue.use(VueRx)
+    Vue.use(VueRx,Rx)
   }
 
   if(typeof exports === 'object' && typeof module === 'object') {