Small Town Coder

sharing code samples for desktop, web, and mobile

Rendering a bbUI ImageList using jQuery Ajax and Backbone Views

Javascript example of rendering an RSS feed into a bbUI ImageList widget. Example uses jQuery, Backbone.js, and bbUI.js.

Try it live using Ripple: http://www.smalltowncoder.com/samples/bbui/ajaxlist

 

var isWebWorksReady = false;
	
window.addEventListener('load',function() {
	window.FeedData = new FeedCollection();
	window.FeedList = new ImageList({ collection: window.FeedData } );

	if (navigator.userAgent.indexOf('Version/10.0') < 0) {
		var evt = document.createEvent('Events');
		evt.initEvent('webworksready', true, true);
		document.dispatchEvent(evt);
	}
});

document.addEventListener('webworksready', function(e) {

	if (isWebWorksReady) return;
	
	isWebWorksReady = true;
	
	bb.init({
		onscreenready: function(e) {
			getData(function() { 
				$(window.FeedList.el).appendTo(e); 
				bb.style(e);
			});
		},
		ondomready: function(e) {
			
		},
		bb10ForPlayBook: false
	});
			
	bb.pushScreen('main.html', 'mainscreen');
});

function getData(complete) {
	$.ajax({
		url:'http://www.smalltowncoder.com/syndication.axd',
		dataType: 'xml',
		crossDomain: true,
		success: function(data,status, xhr) {
			$(data).find('item').each(function() {
				var item = new FeedModel();
				item.set('title',$(this).find('title').text());
				item.set('desc', $(this).find('description').text());
				item.set('link', $(this).find('link').text());
				item.set('pubDate', $(this).find('pubDate').text());
				item.set('author', $(this).find('author').text());
				window.FeedData.add(item);
			});
			complete();
		},
		error: function(xhr, status, exception) {
			console.log(exception);
			complete();
		}
	});
}

var FeedModel = Backbone.Model.extend({
	initialize: function() {
		this.title = '';
		this.desc = '';
		this.link = '';
		this.pubDate= '';
		this.author = '';
	}
});

var FeedCollection = Backbone.Collection.extend({
	model: FeedModel
});

var ImageList = Backbone.View.extend({
	tagName: 'div',
	attributes: {
		'data-bb-type': 'image-list'
	},
	initialize: function() {
		this.render();
		this.collection.on('add', this.addItem, this);
	},
	render: function() {
		for (var i = 0; i < this.collection.length; i++) {
			this.addItem(this.collection.at(i));
		}
		return this;
	},
	addItem: function(item) {
		var listItem = new ImageListItem({ model: item });
		$(this.el).append(listItem.el);
		return this;
	}
});

var ImageListItem = Backbone.View.extend({
	tagName: 'div',
	initialize: function() {
		this.render();
	},
	events: {
		'click': 'onclick'
	},	
	render: function() {
		var title = this.model.get('title');
		var author = this.model.get('author');
		var pubDate = this.model.get('pubDate');
		$(this.el).attr('data-bb-type','item');
		$(this.el).attr('data-bb-img','resources/images/newspaper.png');
		$(this.el).attr('data-bb-title', title);
		$(this.el).text('Published: ' + pubDate + ' by ' + author)
		return this;
	},
	onclick: function() {
		var link = this.model.get('link');
		window.location = link;
	}
});