如何实现动态breadcrumb

Question

我想实现动态面包屑,真的不知道我该怎么做.无法在互联网上找到很多例子.请参阅附件中我添加了痕迹的图片.它的代码如下

  <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.当我点击按钮搜索它会显示我的产品列表,当我在产品上选择一个时,面包屑应显示为主页>搜索>产品.我还附上了当我点击搜索按钮时发生的事情的图像

请让我知道我应该怎么做.我真的被卡住了.我使用淘汰赛,jquery.

Answer 1

好吧,如果您创建了一个面包屑视图模型:

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示例中获得了navhistory.js的自定义实现.但这应该足以让你有一个良好的开端.我假设您确实希望这是一个SPA,尽管您的链接中有实际的URL会将您带到另一个页面.