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 つのレベルしかありません。[検索] ボタンをクリックすると、製品のリストが表示され、製品を選択すると、ブレッドクラムが [ホーム] > [検索] > [製品] として表示されます。検索ボタンをクリックすると何が起こるかの画像も添付しています

検索結果

どうすればいいのか教えてください。私は本当に立ち往生しています。私はノックアウト、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 example から navhistory.js のカスタム実装を取得しました。しかし、それはあなたに有利なスタートを切るのに十分なはずです. 別のページに移動するリンクに実際の URL が含まれているにもかかわらず、実際にはこれを SPA にしたいと考えていると思います。

于 2013-01-25T13:38:28.023 に答える