2014-01-13 16 views
0

我已經使用python/django/backbone(它大致相當於一個簡單的Todo List應用程序)構建了一個「小」單頁網頁應用程序。如何在單個頁面中設置href javascript/html5應用程序

但我還沒有解決所有href屬性設置(用於搜索引擎優化)的問題,但卻阻止用戶的瀏覽器在一個新的URL上重新加載整個應用程序。

一個歸結例子問題:

鑑於此HTML片段不能從(可加入到)減:

<a href="/myaccount/" >My Account</a>

你怎麼能實現以下時用戶點擊a元素:

  1. 發送請求到服務器的/我的帳戶/
  2. 做更新瀏覽器地址http://www.example.com/myaccount/

的解決方案並不需要依靠骨幹網的任何現有功能。我假設要求(2)確實需要HTML5這是很好的。

關於研究此問題的注意事項:我已經完成了大部分常見的搜索操作,以找到大多數解決方案中的一個共同想法。主要想法是在a元素中使用onclick而不是設置href,然後利用HTML5的pushstate API,但這不是我的問題的解決方案。通過試驗這個解決方案,我發現擁有href集合會導致瀏覽器發送/ myaccount /的請求,而不管我在onclick上放置什麼。

+0

分享你的代碼,這些東西應該由骨幹路由器和骨幹來處理。歷史 –

+0

可能與骨幹相關https://gist.github.com/ssafejava/8394497 – Trindaz

+0

請確認你希望所有相關鏈接都是轉換的絕對鏈接或發送請求不只服務器到客戶端? –

回答

2

我想提供的HTML代碼snipplet是骨幹視圖的一部分,即。以模板的形式。爲防止click事件的傳播

<a href="/myaccount/" class="navigation-element" >My Account</a> 

然後,在你的骨幹視圖中添加事件處理程序,並使用preventDefault()方法:首先,添加一個選擇是有道理的,以你的代碼,就像一類

events: { 
    'click .navigation-element': 'onNavigationElementClick' 
}, 
onNavigationElementClick: function(e) { 
    e.preventDefault(); 
    /* Here comes your magic */ 
}, 

這裏的關鍵是抓住事件並阻止瀏覽器跟蹤鏈接。這是通過preventDefault方法完成的。

相關問題