Oren Farhi

Written by Oren Farhi, Senior Front End Engineer & Javascript Consultant, follow me on

Integrating Backbone.View, Backbone.Model & jQuery plugin

July 24, 2013

One of the most required features for Echoes Player was auto complete for the search box. After reviewing few plugins, I decided to use jqueryui auto complete plugin, as jquery-ui has been already integrated and loaded to echoes.

The challenge was integrating it seamlessly with Echoes Backbone.Model and the Backbone.View that manages the search view.

Import & Define

Since Echoes Player is based on require.js for dependency management, jquery-ui should be defined in the config.js file. That is quite straight forward:

require.config({
	deps: ['js/main.js'],
	shim: {
		...
		'bootstrap': {
			deps: [ 'jquery', 'jqueryui' ],
			exports: 'jQuery'
		},

		'jqueryui': {
			deps: ['jquery'],
			exports: 'jQuery'
		}
		....
	},

	paths: {
		jquery: 'libs/jquery/jquery',
		jqueryui: 'libs/jquery/jquery-ui',
		...
	},
});

In the Echoes architecture concept, the main.js is the starting point of the application, and it is asking to load “bootstrap” javascript file (aside to other plugins) which requires jquery-ui - so that is how jquery-ui is ready to be used right in the beginning of initialising the whole app:

require([
	'jquery',
	'bootstrap',
	'safe',
	'switcher',
	'views/player_app',
	'models/player_app',
	'routers/app_router'
], function( $, bootstrap, safe, switcher, PlayerApp, PlayerModel, AppRouter ) {
	var playerModel = new PlayerModel();
	var playerView = new PlayerApp({ model: playerModel });
	var playerRouter = new AppRouter({ model: playerModel });
});

Putting the plugin into place

Since the auto complete feature belongs to the search box in Echoes Player, it has been defined in the MediaSearch View - which is a first level view in Echoes architecture. It is defined once in the constructor of this view:

var MediaSearch = Backbone.View.extend({
		el: '#media-explorer',

		events: {
			'submit': 'querySearch'
		},

		initialize: function(){
			this.model.on('change:query', this.render, this);
			// cache input field
			this.$search = this.$el.find('input');
			this.render(this.model);
			this.activateAutoComplete();
		},
...
}

Google’s search service functions as the query provider for the searches, and after a little research in google, I found the appropriate url that returns json results for any query term.

The “activateAutoComplete” function first initiates the plugin with the standard jquery-ui auto complete:

activateAutoComplete: function() {
	this.$search.autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "http://suggestqueries.google.com/complete/search",
				dataType: "jsonp",
				data: {
					hl: "en",
					ds: "yt",
					oi: "spell",
					spell: "1",
					json: "t",
					client: "youtube",
					q: request.term
				},
				success: function( data ) {
					response( data[1] );
				}
			});
		},
		minLength: 2,
...

With the above configuration, the plugin suggests results as i wanted with the search view.

The next challenge I had was related to usability when using this auto complete feature. The expected behaviour when choosing a certain suggestion of the result (pressing enter on the result) results in 2 operations:

  • Updating the input box with the selected suggested term - This is handled by the plugin.
  • Notifying Echoes about the new query so it can fetch the appropriate results form youtube.

Connecting the suggestion to the Backbone.Model

The auto complete plugin exposes a “select” function api. This function runs whenever a selection of the suggested results has been made. This function receives 2 arguments: event & ui.

The selected term can be retrieved from the “ui” argument by pointing to: “ui.item.value”.

To have easy access to Echoes Model, I binded the “select” function with the scope of the MediaSearch View - so i can access to “this.model” within this function - and update the model with the new query:

activateAutoComplete: function() {
	this.$search.autocomplete({
		source: function( request, response ) {
			...
		},
		minLength: 2,
		select: _.bind(function( event, ui ) {
			var term = ui.item ? ui.item.value : false;
			if (term) {
				this.model.set({ query: term });
			}
		}, this)
	});
}

There are few tweaks and code organisations that should be done in the future:

  • integrating the ajax call with a Backbone.Model or a Backbone.Collection to keep the separation of model and view.
  • converting the select function to a referenced named function defined on the view
  • Perhaps - having a more encapsulated integration with the MediaSearch View, so the plugin may be easily toggled, or for other plugins to be integrated in the same transparent way.

Overall, in this way, the autocomplete is integrated nicely into the MediaSearch view and can be easily toggled or replaced, if needed.

Echoes is an open source project, and you can fork it, pull request or just read the code at github.

Your thoughts are welcome.


Oren Farhi

Written by Oren Farhi, Senior Front End Engineer & Javascript Consultant, follow me on

My Consulting Packages

My consulting offerings include: Front End Development, Code reviews (Angular, NgRx, React, Redux, Javascript), workshops, Consulting and Development. Feel free to reach out thru the below forms or through thecontact page.

javascript
react
angular