2012-01-25 3 views
0

그래서 녹아웃의 data-bind = "click : ShowHide"로 함수를 호출하려면 어떻게해야할까요? 데이터 바인딩은 템플릿에 의해 채워지는 li 요소에 있습니다. 다음과 같이 제 기능을했다 :jquery slideToggle() 함수가 녹아웃 템플릿

viewModel = { 
LoadedReports: ko.observableArray([]), 

ShowHide: function() { 

      $(this).children().slideToggle('slow'); 
     } 
} 

을 내 템플릿 내에서 내가 가진 :

<li data-bind="click: ShowHide, clickBubble: false"><'children elements being populated'></li> 

답변

-4

요 전날이 사람이 나에게 가져 왔습니다. 내가해야 할 일에 대한 유다의 제안에 대한 주석을 보라.

+0

왜 당신의 대답을 받아 들였습니까? – Adaptabi

1

리튬을 나타내는 개체에 .ShowHide 기능을 착용 할 것 (나는 그것이 LoadedReport 인스턴스의 있으리라 믿고있어.)

.ShowHide를 입력하십시오. 또는보기 모델에 .ShowHide 기능을 넣은 다음 바인딩에서 $ root.ShowHide를 클릭하여 사용할 수 있습니다.

+0

나는 이것을 다른 날에 실제로 알아 냈습니다. 이유는 실제로 $ (this) 선택자에 있습니다. 리가 클릭되었을 때 전체 이벤트가 함수에 전달 되었기 때문에이 라인이 필요했습니다. $ (e.currentTarget) .siblings ('ul'). slideToggle(); 감사합니다. – spacebed

+0

확인. 답안을 여기에 게시하면 수락에 동의하는 것이므로 질문에 답변이 있음을 알 수 있습니다. 답이 대답되지 않은 질문에 현재 나타나 있습니다. –

1

죄송합니다. 이미 답변을 받았지만 나에게 대답이 분명하지 않은 경우 죄송합니다.

<!-- Step 1 - Create the HTML File or the View --> 
<!DOCTYPE html> 
<html> 
<head> 
    <!-- Step 2 - Include jquery and knockout --> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script> 

    <!-- Step 3 - Add script to run when page loads --> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 

      <!-- Step 4 - Create a ViewModel --> 
      function viewModel() { 
       _self = this; 
       _self.showHide = function(viewModel, event) { 
        $(event.currentTarget).children('div').slideToggle(); 
       }; 
      }; 

      <!-- Step 5 - Activates knockout.js bindings --> 
      ko.applyBindings(new viewModel()); 
     }); 
    </script> 
</head> 
<body style=""> 
    <div> 
     Option 1 
     <!-- Step 6 - Create a HTML Elements with bindings --> 
     <div data-bind="click: showHide" style="border:2px solid;"> 
     Click me 
      <div style="display: none;"> 
       Now you see me! 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

질문에서 차이가 나는 <div> 태그 대신이 예를 들어 <li>을 사용하고 단순히이다 : 그래서 여기에 명확한 예이다.