javascript - how to implement dynamic breadcrumb - Stack Overflow

admin管理员组

文章数量:1391999

I want to implement dynamic breadcrumb and really dont know how do i go about it. Cant find much examples on internet. Please see attached image where i have added breadcrumb. The code for it as below

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

Currently i have just 2 level in breadcrumb as Home and Search. when i click on button Search it will show me list of products and when i select one on product the breadcrumb should show as Home > Search > Product. I am also attaching image of what happens when i click on Search button

Please let me know how should i go about it. I am really stuck. I use knockout,jquery.

I want to implement dynamic breadcrumb and really dont know how do i go about it. Cant find much examples on internet. Please see attached image where i have added breadcrumb. The code for it as below

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

Currently i have just 2 level in breadcrumb as Home and Search. when i click on button Search it will show me list of products and when i select one on product the breadcrumb should show as Home > Search > Product. I am also attaching image of what happens when i click on Search button

Please let me know how should i go about it. I am really stuck. I use knockout,jquery.

• javascript
• knockout.js

Share Improve this question Follow asked Jan 25, 2013 at 8:35 DevelopmentIsMyPassionDevelopmentIsMyPassion 3,59144 gold badges3636 silver badges6161 bronze badges 1

• Any clue? I really need to get this sorted – DevelopmentIsMyPassion Commented Jan 25, 2013 at 11:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Well, if you created a breadcrumb view model:

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

And then use it something like this (I've not tested this, so there may be some errors in it, but the idea should be good!)

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

You would set it up in the function called whenever you navigate to a "page" within your SPA:

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

Don't forget to bind the model the the html element for knockout to do its stuff.

I'm using the example code for sammy.js for the navigation, though I will admit that I haven't used sammy.js before, I've got a custom implementation of navhistory.js from the Microsoft Big Shelf SPA example. But that should be enough to give you a head start on it. I'm assuming that you actually want this to be a SPA, despite having actual URLs in your links that would take you off to another page.

本文标签： javascripthow to implement dynamic breadcrumbStack Overflow