Enrutador backbone.js Pushstates & Root

Tengo una pagina http://www.domain.com/user/123, Donde 123 is the user_id for a particular user. There is a tabbed interface, and clicking on the tab should update the address bar with a new URL.

Ejemplo: Al hacer clic en <a href="likes" data-toggle="tab">Likes</a> should update the address bar to http://www.domain.com/user/123/likes

Problema: I am trying to implement pushstates in backbone.js, but I can't seem to get the URL right when using app.navigate(). I tried setting the root attribute in the router using Backbone.history.start({ pushState: true, root: "/user/" }); which gives me the root as http://www.domain.com/user/. How can I add the user_id to the end of root? ie. http://www.domain.com/user/123/

//Router
var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'likes',
        'likes': 'likes',
    },

    likes: function() {
        console.log('fn likes');
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ pushState: true, root: "/user/" });

$(function() {
    // Update address bar URL
    $('a[data-toggle="tab"]').on('click', function(e) {
        app.navigate(e.target.getAttribute('href'));
    });

});

Código actualizado

¿Cómo puedo actualizar el root atributo de Backbone.history after grabbing the user_id from the url? The current method shown below does not work

// Router

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user_id/likes': 'likes',
        ':user_id/': 'likes'
    },

    set_user_id: function($user_id) {
        this.user_id = $user_id;
        // ADD SOME CODE TO CHANGE Backbone.history's root attribute
    },

    likes: function($user_id) {
        console.log('fn likes');
        this.set_user_id($user_id);
        $('#tab_likes"').show();
    }
});

var app = new AppRouter();
Backbone.history.start({ 
    pushState: true, 
    root: '/user/' + app.user_id + '/'  // app.user_id is undefined at the time this is called
});

preguntado el 31 de julio de 12 a las 14:07

2 Respuestas

You need to create your routes with a parameter to capture the variable user id, i.e.

var AppRouter = Backbone.Router.extend({

    routes: {
        ':user/likes': 'likes',
    },

    likes: function(user) {
        console.log(user, 'fn likes');
        $('#tab_likes"').show();
    }
});

See the Backbone documentos for more info. Needless to say that your href should be changed accordingly, i.e. href="123/likes".

Finally, in order to not only save the url in history but also trigger the route you need to navigate as such:

app.navigate(e.target.getAttribute('href'), true);

Respondido 31 Jul 12, 15:07

En lugar de cambiar el hrefs para incluir el user_id, is it possible to change the root atributo de Backbone.history after the router has gotten the value of :user? Updated Code in original post - nyxynyx

No the root should be a constant. But presumably your backbone view has access to the user model and hence its id - gozad

navigate requiere de un trigger option to be set if you want it to actually fire the route handler (as opposed to just update the URL). From the documentación:

Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL. If you wish to also call the route function, set the trigger option to true.

Entonces, para obtener el console.log debug to at least work, try this:

app.navigate(e.target.getAttribute('href'), true);

Respondido 31 Jul 12, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.