Search⌘ K
AI Features
Home
Courses
Reactive Programming with RxJS

Search Box Widget of Model View Intent

Explore how to implement a search box widget in Cycle.js using the Model View Intent pattern. Understand how to handle user input, render UI components reactively, and integrate with external APIs while maintaining side effect-free functions for robust web applications.

We'll cover the following...

The main method for the implementation of the search widget will look like this:

Javascript (babel-node)
var h = CycleDOM.h;
var SearchBox = require('./searchbox');
function main(responses) {
  var wpSearchBox = SearchBox({
    DOM: responses.DOM,
    props$: Rx.Observable.just({
      apiUrl: API_URL
    })
  });
  var searchDOM$ = wpSearchBox.DOMTree;
  var searchResults$ = responses.JSONP.filter(function(res$) {
    return res$.request.indexOf(API_URL) === 0;
  })
    .concatAll()
    .pluck('query', 'search')
    .startWith([]);
  return {
    JSONP: wpSearchBox.JSONPQuery,
    DOM: Rx.Observable.combineLatest(searchDOM$, searchResults$, function(
      tree,
      links
    ) {
      return h('div', [
        h('h1', 'Wikipedia Search '),
        tree,
        h('hr'),
        h(
          'div',
          links.map(function(link) {
            return h('div', [
              h('a', { href: WIKI_URL + link.title }, link.title)
            ]);
          })
        )
      ]);
    })
  };
}
Cycle.run(main, {
  DOM: CycleDOM.makeDOMDriver('#container'),
  JSONP: CycleJSONP.makeJSONPDriver()
});

Now, we will delegate the responsibility of handling user input and rendering the search box to the wpSearchBox widget. We may easily reuse the wpSearchBox widget in any another application that requires a search box that queries URL APIs.

These are the main ...