Backbone.jsとpushState

Question

バックボーンルータでpushStateを有効にすると、すべてのリンクでfalseを返す必要がありますか、それとも自動的にバックボーンで処理しますか？そこには、HTML部分とスクリプト部分の両方のサンプルがありますか？むしろ個別リンク上でpreventDefaultを行うよりも、あなたは、ルータがデフォルトでそれらを処理し、data-bypass属性を持つことによって、例外を作ってみよう、という使い方

initializeRouter: function() { 
    Backbone.history.start({ pushState: true }); 
    $(document).on('click', 'a:not([data-bypass])', function (evt) { 

    var href = $(this).attr('href'); 
    var protocol = this.protocol + '//'; 

    if (href.slice(protocol.length) !== protocol) { 
     evt.preventDefault(); 
     app.router.navigate(href, true); 
    } 
    }); 
} 

：

Answer 1

これはティムBranyenが彼のboilerplateで使用するパターンです。私の経験では、パターンとしてうまく機能します。私は周りに素晴らしい例は分かりませんが、自分で試してみることはあまり難しくありません。バックボーンの美しさはそのシンプルさにあります。）

Answer 2

$(document.body).on('click', 'a', function(e){ 
    e.preventDefault(); 
    Backbone.history.navigate(e.currentTarget.pathname, {trigger: true}); 
}); 

Answer 3

match()またはstartsWith()（ES 6）は、プロトコルをチェックするために使用することができます。 pathnameプロパティで絶対URLをサポートする場合は、ベースURLをlocation.originで確認してください。

function(evt) { 
    var target = evt.currentTarget; 
    var href = target.getAttribute('href'); 

    if (!href.match(/^https?:\/\//)) { 
    Backbone.history.navigate(href, true); 
    evt.preventDefault(); 
    } 
    // or 

    var protocol = target.protocol; 

    if (!href.startsWith(protocol)) { 
    // ... 
    } 
    // or 

    // http://stackoverflow.com/a/25495161/531320 
    if (!window.location.origin) { 
    window.location.origin = window.location.protocol 
    + "//" + window.location.hostname 
    + (window.location.port ? ':' + window.location.port: ''); 
    } 

    var absolute_url = target.href; 
    var base_url = location.origin; 
    var pathname = target.pathname; 

    if (absolute_url.startsWith(base_url)) { 
    Backbone.history.navigate(pathname, true); 
    evt.preventDefault(); 
    } 
} 

Answer 4

は、HTMLで<a>タグにクリックのデフォルトの動作を防ぐことができます。 <script />タグ内に次のコードを追加してください。

<script> 
$(document).on("click", "a", function(e) 
{ 
    e.preventDefault(); 
    var href = $(e.currentTarget).attr('href'); 
    router.navigate(href, true);router 
}); 
</script>