Frage

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);
    }

}
});
War es hilfreich?

Lösung

Pointing multiple client-side Spine.js models to a single server-side route should be fine. Within your client-side code, ll you need to do is specify within each Spine.js model how they should form the URL to contact the server:

See http://spinejs.com/docs/ajax, e.g.:

Contact.extend({ url: "/users" });

On the server side, you'll need to support the POST/GET/PUT/DELETE operations on the route, for C/R/U/D, respectively, and parse the parameters to determine which model is intended.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top