2012-07-31 4 views
0

웹 앱을 제작 중이며 Knockout JS를 사용하도록 UI를 변환하려고합니다. 나는 넉 아웃의 총 멍청한 녀석이다. 친절히 대해주세요!넉 아웃 JS 드릴 다운 JS

보통 PHP를 사용하여 직원 목록을로드 한 다음 직원이 선택되면 JQuery를 사용하여 그 직원의 ID를 찾은 다음 백엔드로 AJAX 호출을 호출하고 결과 상자를 채운 다음 슬라이드합니다 하위.

넉 아웃에서이 동작을 복제 할 수있는 방법이 있습니까?

+0

http://whathaveyoutried.com. 또는 코드의 non-knockout 버전이 있습니까? 또는 http://learn.knockoutjs.com/에서 자습서를 사용해보십시오. – Tyrsius

+0

예, 코드의 non knockout 버전이 있습니다. 그러나 모든 PHP를 제거하여 코드를 정리하고 싶습니다. 나는 모든 자습서를 겪어왔다. 그들은 굉장했다! 그래서 기본적으로 제 질문은 내가 선택한 직원의 ID를 어떻게 얻을 수 있는지입니다. 나는 더 많은 독서를했지만 여전히 그 대답을 찾지 못했습니다. –

+0

네이슨, 내가 그 물건을 요청한 이유는 당신에게 힘든 시간을주지는 않았을 것입니다 (아마도 마지막 것이었을 것입니다). 이렇게 제한된 세부 사항으로 질문에 대답하는 것은 매우 어렵 기 때문입니다. "선정 된"이란 무엇을 의미합니까? 결과 상자는 어떻게 생겼습니까? 직원 클래스 또는 목록은 어떻게 생겼습니까? 문제를 충분히 이해하지 못했을 때 어떻게 도와 줄 수 있습니까? – Tyrsius

답변

1

knockout/jquery에서 ajax 드릴 다운을 처리하는 방법은 녹아웃 클릭 핸들러를 사용하는 것입니다. 이렇게하면 모든 속성이나 항목 자체를 가져온 다음 jQuery에서 아약스를 처리 할 수 ​​있습니다. 내 코드에서 예제. HTML 파일에서

다음 JS 파일에서

... 
<div class="empListName" data-bind="text: fullName(), click: $root.showEmp"> 
</div> 
.... 

:

function MainScreenViewModel() { 
    // Data 
    var self = this; 
    self.employees = ko.observableArray([]); 
    ... 

    // Functions 
    self.showEmp = function(data, event){ 
    var id = data.empId(); 
    var checkA = $(event.target).parent().find('.empListNameX').first(); 
    var expand = $(event.target).parent().next(); 
    if (checkA.hasClass('open')){ //Close it 
     checkA.removeClass('open').addClass('closed'); 
     expand.slideUp(); 
    }else{ 
     $.get('/employee/getempinfo/'+id, function(info){ 
      checkA.addClass('open').removeClass('closed'); 
      expand.html(info).slideDown(); 
     }) 
    } 
    } 
    ... 
} 
관련 문제