Skip to content

Instantly share code, notes, and snippets.

@oliverlundquist
Created July 14, 2016 09:02
Show Gist options
  • Save oliverlundquist/6988fb7e8335da147ee5eab2e5f15db3 to your computer and use it in GitHub Desktop.
Save oliverlundquist/6988fb7e8335da147ee5eab2e5f15db3 to your computer and use it in GitHub Desktop.
RxJS Merge Streams
var params = {};
var keyUpStream = null;
var requestStream = null;
keyUpStream = Rx.Observable
.fromEvent(this.$el, 'keyup')
.map(function (event) { return event.target.value; })
.distinctUntilChanged();
requestStream = keyUpStream
.debounce(500)
.flatMapLatest(function (value) {
return Rx.Observable.fromPromise(function () {
// params = '?campaign_id=' + campaignId + '&query=' + value;
return Vue.http.get('/kontrollpanel/campaigns_products_search_post.php');// + params);
})
.map(function (res) { return res.json(); })
.catch(function (errorResponse) {
return Rx.Observable.return({data: [], meta: { total: 0 }});
})
})
.take(1);
keyUpStream
.withLatestFrom(requestStream)
.subscribe(function (streams) {
var queryString = streams[0];
var products = streams[1].data;
var meta = streams[1].meta;
var highlightedProducts = products.map(function (product) {
product.products_name = product.products_name === null ? '' :
product.products_name
.replace('<strong>', '')
.replace('</strong>', '')
.replace(queryString, '<strong>' + queryString + '</strong>');
return product;
});
Vue.set(searchWidget, 'products', products);
Vue.set(searchWidget, 'meta', meta);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment