Javascript 如何实现动态面包屑

我想实现动态面包屑，但真的不知道该怎么做。在网上找不到太多的例子。请参阅附件中的图片，我已经添加了面包屑。它的代码如下所示

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

---

请让我知道我该怎么做。我真的被卡住了。我使用knockout，jquery。

如果您创建了面包屑视图模型：

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();
    }
}

然后像这样使用它（我还没有测试过它，所以可能有一些错误，但是这个想法应该是好的！）

别忘了将模型绑定到html元素中，以便knockout完成它的工作

---

我正在使用导航的示例代码，尽管我承认我以前没有使用过sammy.js，但我已经从中获得了navhistory.js的自定义实现。但这应该足以让你在这方面领先。我假设你真的希望这是一个SPA，尽管你的链接中有实际的URL，可以让你转到另一个页面。

有什么线索吗？我真的需要对这个进行分类。我们在哪里设置url？如果可能的话，我们会非常感谢你。这是一个单页应用程序吗？你在历史记录/导航中使用什么？如果要为每次单击启动导航方法，那么在该方法中，需要将breadcrumbsobserveable数组设置为该页面视图的新breadcrumb值。您需要在视图模型中添加一个方法，以便在再次填充数组之前清除该数组。目前，我对历史记录/导航不使用任何内容。如果你能在小提琴上举个小例子，那对我真的很有帮助。

 <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>

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