Twitter 부트 스트랩 탐색 탭이 KnockoutJS와 충돌합니다

Question

"Basic Tabs"에 문제가 있습니다. MVC에서 뷰의 탭을 렌더링하는 중입니다. 그런 다음 세 가지 다른 부분 뷰에서 KnockoutJS 코드가 있습니다.

제 문제는 각 부분 뷰가 MVVM을 만들고 바인딩을 적용하기 때문에 녹아웃이 다른 녹아웃 코드와 충돌한다는 것입니다.

관련 탭을 누를 때까지 DIV (부분보기 포함) 렌더링을 건너 뛸 수있는 방법이 있습니까? 하나의 인수를 한 번 이상 ko.applyBindings 더 호출 될 조심하는

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#attributes">Attributes</a></li> 
    <li><a href="#interestgroups">Interest groups</a></li> 
    <li><a href="#categories">Categories</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="attributes" class="tab-pane active"> 
     @Html.Partial("_AttributesPartial") 
    </div> 
    <div id="interestgroups" class="tab-pane"> 
     @Html.Partial("_InterestGroupsPartial") 
    </div> 
    <div id="categories" class="tab-pane"> 
     @Html.Partial("_InterestGroupCategoriesPartial") 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#myTab a:first').tab('show'); 
    }); 

    $('#myTab a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
    }); 
</script> 

Answer 1

뭔가 :

다음은 일반보기 내 코드입니다.

예를 들어 페이지에 뷰 모델이 두 개 이상 있습니다 (질문에서 추측 한 경우), 두 번째 인수로 컨테이너 요소를 전달하여 범위를 지정해야합니다.

당신의 의견에 따르면, 게으른로드를 원하면 '표시된'이벤트를 청취해야합니다. 당신은 아직도 할 것 - 그래서

현재 바인딩의 전체 세트를 분해 할 수있는 방법이 전혀 없습니다, 여기에서 설명하고있는 바와 같이

$('#attributes').on('shown', function (e) { 
    initKOView(e.target); // some logic to determine which viewModel to bind to. 
}) 

function initKOView(target) { 
    $(target).load('controller/_RenderPartial?path=' + target, function(data) { 
     $(this).html(data); 
     // Once the data comes back, apply your bindings and make sure to scope it. 
     ko.applyBindings(viewModels[target], this); 
    }) 
} 

(이것은 당신이 세부 사항을 기입 할 것, 의사입니다) 뷰 모델의 범위를 지정합니다.

https://github.com/SteveSanderson/knockout/issues/41#issuecomment-749171

그런 다음 컨트롤러에, 당신은이 PartialViewResult

public PartialViewResult _RenderPartial(string path) 
{ 
    return PartialView(path); 
} 

물론, 당신도 각각에 대해 별도의 컨트롤러 액션을 가질 수 있습니다 추가하고, 매개 변수가 로딩을 생략 할 수 있습니다. 또한 마스터보기에서 @Html.Partial() 항목을 모두 제거 할 수도 있습니다.