Backbone.js ändern Sie die url, ohne die Seite neu zu laden

Ich habe eine Website, die eine Benutzer-Seite. Auf dieser Seite gibt es mehrere links, mit denen Sie erkunden das Profil des Benutzers. Ich möchte es so machen, dass, wenn einer dieser links angeklickt, die url ändert sich, aber das Obere Drittel der Seite, auf welcher der Benutzer die banner nicht neu laden.

Ich bin mit Backbone.js

Habe ich das Gefühl, dass ich in eine solche situation, wo ich solch ein schlechtes Verständnis des Problems bin ich zu tun, dass ich die falsche Frage gestellt, also bitte lassen Sie mich wissen, wenn, dass der Fall zu sein scheint

InformationsquelleAutor Peter Berg | 2013-07-09
  1. 10

    Mein Fehler war davon auszugehen, dass es eine spezielle, integrierte Möglichkeit, dies zu tun, im Rückgrat. Gibt es nicht.

    Einfach durch das ausführen der folgenden Codezeile 

    window.history.pushState('object or string', 'Title', '/new-url');

    führt dazu, Ihren browser-URL zu ändern, ohne die Seite neu zu laden. Öffnen Sie die javascript-Konsole in Ihrem browser jetzt und probieren Sie es mit dieser Seite. Dieser Artikel erklärt, wie es funktioniert in mehr detail (wie bereits in das SO ein post).

    Nun habe ich nur gebunden wird das folgende Ereignis an das document-Objekt (ich bin mit einem single-page-Website):

    bindEvents: () ->
    $(document).on('click', 'a', @pushstateClick)


pushstateClick: (e) ->
    href = e.target.href || $(e.target).parents('a')[0].href
    if MyApp.isOutsideLink(href) == false
        if e.metaKey 
                      #don't do anything if the user is holding down ctrl or cmd; 
                      #let the link open up in a new tab
        else
            e.preventDefault()
            window.history.pushState('', '', href);
            Backbone.history.checkUrl()

    Sehen dieser Beitrag für mehr info.

    Beachten Sie, dass Sie KÖNNEN, übergeben Sie die option pushstate: true auf Ihren Anruf, um Rückgrat.Geschichte.start(), aber dies nur macht es so, dass die Navigation direkt zu einer bestimmten Seite (z.B. example.com/exampleuser/followers) löst eine backbone-route, anstatt einfach was zu nirgendwo.

    • Sie können auch anrufen window.location = '/#/' + page_uri; zu trigger das Rückgrat der route.
    • Hier aber mein Anliegen ist die Arbeit mit aktuelle ROUTING, D. H. routing ohne '#'
    • Backbone.Routers haben eine navigate - Methode seit der version 0.9.0.
    InformationsquelleAutor Peter Berg
  2. 1

    Router sind dein Freund in dieser situation. Im Grunde erstellen Sie einen router, der mehrere unterschiedliche Routen. Ihre Routen aufrufen verschiedener Ansichten. Diese Ansichten werden nur die Teile der Seite, die Sie definieren. Ich bin mir nicht sicher, ob dieses video wird helfen, aber es kann Ihnen eine Vorstellung davon geben, wie ein Router die mit der Seite interagieren: http://www.youtube.com/watch?v=T4iPnh-qago

    Hier ein rudimentäres Beispiel:

    myapp.Router = Backbone.Router.extend({

    routes: {
        'link1': 'dosomething1',
        'link2': 'dosomething2',
        'link3': 'dosomething3'
    },

    dosomething1: function() {
        new myapp.MyView();
    },
    dosomething2: function() {
        new myapp.MyView2();
    },
    dosomething3: function() {
        new myapp.MyView3();
    }

});

    Dann die url wie folgt Aussehen: http://www.mydomain.com/#link1.

    Auch, weil <a href=''></a> - tags wird automatisch eine Seite aufrufen aktualisieren, stellen Sie sicher, dass Sie anrufen .preventDefault(); auf Ihnen, wenn Sie nicht möchten, dass die Seite zu aktualisieren.

    InformationsquelleAutor bentedder
Schreibe einen Kommentar