2

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

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

4

1 回答 1

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，但我从Microsoft Big Shelf SPA 示例中获得了 navhistory.js 的自定义实现。但这应该足以让您在这方面取得领先。我假设您实际上希望这是一个 SPA，尽管您的链接中有实际的 URL 会带您进入另一个页面。

于 2013-01-25T13:38:28.023 回答