如何实现动态面包屑

我想实现动态的面包屑，真的不知道我该如何去做。不能在互联网上找到很多例子。请参阅附加的图片，我添加了面包屑。如下如何实现动态面包屑

<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

这是一个单页的应用程序？ –

如何实现动态面包屑

回答

相关问题