我想实现动态的痕迹,但我真的不知道如何去做。无法在互联网上找到很多例子。请参阅附件中我添加了痕迹的图片。代码如下
<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>
目前我只有2级的面包屑作为Home和Search。当我点击按钮搜索它会显示我的产品列表,当我在产品上选择一个时,面包屑应显示为Home&gt;搜索&gt;产品。我还附上了点击搜索按钮
时发生的事情的图像
请让我知道我应该怎么做。我真的被卡住了。我使用淘汰赛,jquery。
答案 0 :(得分:5)
好吧,如果你创建了一个痕迹视图模型:
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,但我从{{我有一个自定义的navhistory.js实现3}}。但这应该足以让你有一个良好的开端。我假设您确实希望这是一个SPA,尽管您的链接中有实际的URL会将您带到另一个页面。