Search Box Widget of Model View Intent
Get to know what the implementation of the search box widget looks like as a step-by-step process.
We'll cover the following...
The main method for the implementation of the search
widget will look like this:
Press + to interact
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 ...
Access this course and 1400+ top-rated courses and projects.