I have three models (album, song, artist) and I want to get a list of each in a certain genre. Right now the backend of this app has one API endpoint (/browse) which gets two arguments (grenre(s) and item type ('album','song', or 'artist') and spits out JSON.
I'm not sure if I need to have separate api endpoints for each model to query, or if it's possible to use the backend I have now.
Also, are there any good examples of complex routing stuff? The examples on the site are very basic...
I'm thinking of something like /browse/(albums | artists | songs)/genre+genre+genre/(rating | trending | listens) (which would be three arguments I'd send back to the server to get the item type, genre(s) (multiple are optional, I'd have to do some regex in routes), and sortby).
UPDATE: Here's what I've got.
var Chart = Spine.Controller.sub({
events: {
'click .chart_clickthrough': 'chartNav',
'change input.browse_switch': 'refreshChart',
'change input.sort_switch': 'refreshChart'
},
browse: {
url: '/api/chart',
processData: true,
data: {
browse_object: 'song',
sort: 'trending',
genre: []
}
},
init: function() {
this.refreshChart();
},
render:function(model,sortby) {
var items = model.all();
if($('.chart_list').children.length > 0) {
$('.chart_list').html('');
}
if(model) {
//unbind the event for the model we aren't displaying. prevents the view from being updated too often
Song.unbind('refresh');
Artist.unbind('refresh');
Album.unbind('refresh');
model.bind('refresh', function() {
chart.render(model,sortby);
});
for(var i = 0, l = items.length; i < l; i++) {
//console.log(model.all()[i]);
var template = $('#chartTpl').html(),
data = items[i],
html = Mustache.to_html(template, data);
$('.chart_list').append(html);
}
}
},
refreshChart: function(e) {
if(e) {
e.preventDefault();
}
this.browse.data.browse_object = $('#BrowseOptions input[name=browse_object]:checked').val();
this.browse.data.sort = $('#BrowseOptions input[name=sort]:checked').val();
switch(this.browse.data.browse_object) {
case 'album': Album.fetch(this.browse);
this.render(Album,this.browse.data.sort);
break;
case 'song': Song.fetch(this.browse);
this.render(Song,this.browse.data.sort);
break;
case 'artist': Artist.fetch(this.browse);
this.render(Artist,this.browse.data.sort);
break;
}
},
chartNav: function(e) {
e.preventDefault();
var attr = e.target.attributes,
type = attr['data-type'].value,
id = attr['data-id'].value,
id2 = attr['data-album-id'].value;
//console.log('clicked id: ' + id + ', type: ' + type + ', album id: ' + id2);
if (type === 'Artist') {
this.navigate('/artist',id);
} else {
var albumId = type === 'album' ? id : id2;
this.navigate('/album', albumId);
}
}
});