如何實現動態麪包屑

我想實現動態的麪包屑，真的不知道我該如何去做。不能在互聯網上找到很多例子。請參閱附加的圖片，我添加了麪包屑。如下如何實現動態麪包屑

<div style="font-size: 10px;"> 
     <ul class="breadcrumb"> 
      <li> 
       <a href="../Default.aspx">Home</a> <span class="divider">></span> 
      </li> 

      <li> 

      <li><a id="navObject" href="../AgrProduct/Index.aspx" class="active" >Search</a></li> 
     </ul> 


    </div>

breadcrumb

目前我有面包屑首頁和搜索只是2級爲它的代碼。當我點擊按鈕搜索時，它會顯示我的產品列表，當我選擇產品時，麪包屑應該顯示爲主頁>搜索>產品。我還附上發生了什麼形象，當我搜索按鈕點擊

SearchResult

請讓我知道我應該如何去做。我很困難。我用淘汰賽，jquery。

來源

2013-01-25 DevelopmentIsMyPassion

任何線索？我真的需要得到這個排序 – DevelopmentIsMyPassion

好吧，如果你創建了一個麪包屑視圖模型：

var breadCrumbViewModel = function() 
{ 
    var self = this; 
    self.breadCrumbs = ko.observableArray(); 

    self.addCrumb = function(url, text, active) 
    { 
     self.breadCrumbs.push({ 'url': url, 'text': text, 'active': active }); 
    } 

    self.reset = function() 
    { 
     self.breadCrumbs.removeAll(); 
    } 
}

，然後用它是這樣的（我沒有測試這一點，所以有可能是在它的一些錯誤，但這個想法應該是好）

<ul class="breadcrumb" data-bind="foreach: breadCrumbViewModel.breadCrumbs"> 
    <li> 
     <a data-bind="attr: { href: url }, text: text, css: { active: active }"></a> <span data-bind="visible: $index < breadCrumbViewModel.breadCrumbs - 1" class="divider">></span> 
    </li> 
</ul>

每當您SPA內導航到「頁」您需要將它在調用的函數：

function() 
{ 
    breadCrumbViewModel.reset(); 
    breadCrumbViewModel.addCrumb('#/Home', 'Home'); 
    breadCrumbViewModel.addCrumb('#/Product/:id', 'Search', true); 
}

不要忘記綁定模型的挖掘html元素做其東西。

我使用示例代碼sammy.js進行導航，但我承認我之前沒有使用過sammy.js，我從Microsoft Big Shelf SPA example中自定義實現了navhistory.js。但這應該足以讓你在這方面取得領先。我假設你確實希望這是一個SPA，儘管在你的鏈接中有實際的URL會將你帶到另一個頁面。

來源

2013-01-25 13:38:28

我們在哪裏設置網址？ – DevelopmentIsMyPassion

如果有可能爲此提供小提琴然後會對你太感謝 – DevelopmentIsMyPassion

這是一個單頁的應用程序？ –

如何實現動態麪包屑

回答

相關問題