동적 탐색 경로를 구현하는 방법

Question

동적 탐색 경로를 구현하고 싶습니다. 실제로 어떻게 이동해야하는지 잘 모릅니다. Cant는 인터넷에서 많은 예제를 찾습니다. 빵 부스러기가 추가 된 첨부 된 이미지를 참조하십시오. 내가 가정 및 검색 등의 이동 경로에 단 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> 

아래로의 코드. 검색 버튼을 클릭하면 제품 목록이 표시되고 제품에서 하나를 선택하면 탐색 경로가 홈> 검색> 제품으로 표시됩니다. 내가

날 내가 그것에 대해 이동하는 방법을 알려주세요 검색 버튼을 클릭 할 때 나는 또한 무슨의 이미지를 첨부하고 있습니다. 나는 정말로 붙어있다. 녹아웃, 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); 
} 

,536,

녹아웃을위한 html 요소를 모델에 바인딩하는 것을 잊지 마십시오. 내가 sammy.js 전에, 나는 Microsoft Big Shelf SPA example에서 navhistory.js의 사용자 지정 구현을 가지고 사용하지 않은 것을 인정한다하더라도

내가 탐색을위한 sammy.js의 예제 코드를 사용하고 있습니다. 하지만 그걸로 시작해야합니다. 나는 당신이 다른 페이지로 당신을 데려 갈 것이 당신의 연결에있는 실제적인 URL가 있음에도 불구하고 실제로 이것이 SPA가되기를 원한다고 가정하고 있습니다.