왜이 이벤트는 녹아웃에서 두 번 처리됩니까?

Question

어떤 이유로 아래 코드는 링크의 클릭 이벤트를 두 번 발동합니다. 나는 비교적 녹아웃에 새로운이고 나는 나의 관례 바인딩을 잘못 할지도 모르다는 것을 생각한다. 아무도 내가 잘못한 것을 말해 줄 수 있습니까? (, BTW 나는 바이올린을 게시하지 않은 이유는 내가 jsfiddle에 GitHub의에서 매핑 플러그인을 포함 할 수 없다는 것입니다.)

JS :

ko.bindingHandlers.activityContent = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 
     var content = document.createElement("p"); 
     content.innerHTML = '<a href="javascript:void(0)" data-bind="text: user_name, click: $parent.NavigatePage.bind($data, \'profile\', user_id)"></a>'; 
     element.appendChild(content); 
     ko.applyBindings(bindingContext, content); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 
    } 
}; 

var activities = ko.mapping.fromJS({Activities: [{ 
    "user_id": "52b5042d572b94ceadf6asdf1a2a5bc", 
    "user_name": "Sean Templeton" 
}, { 
    "user_id": "52b5042d57asfda2b94ce61a2a5bc", 
    "user_name": "Sean Templeton" 
}, { 
    "user_id": "52b5042d572b94ce61a2a5bc", 
    "user_name": "Sean Templeton" 
}, { 
    "user_id": "52b5042d5asdfasdf72b94ce61a2a5bc", 
    "user_name": "Sean Templeton" 
}, { 
    "user_id": "52basdf5042d572b94ce6asdf1a2a5bc", 
    "user_name": "Sean Templeton" 
}], NavigatePage: function(page, userId) { console.log(this); console.log(page); console.log(userId()); }}); 

ko.applyBindings(activities); 

HTML :

<Ul data-bind="foreach: Activities"> 
    <li data-bind="activityContent: $data"></li> 
</ul> 

Answer 1

init에서 ko.applyBindings(bindingContext, content); 행을 삭제하고 update이 init에서 한 번 실행 된 다음 각 업데이트에서 실행됩니다.

또한 큰 문제가 있습니다. @nemesv에 의해 위에 주어진 바이올린에서 사용자 지정 바인딩에서 ko.applyBindings()을 제거하지 않으면 목록이 전체 5 번 반복되지 않습니다.

이 예제를 넘어 바인딩 activityContent에 대한 큰 계획을 가지고하지 않는 한, 사용자 정의 바인딩 생략하고 단순히 뷰 모델에 <li> 요소에 위임 이벤트를 등록 할 수

다른 접근 방식. 그런 다음 Knockout의 ko.dataFor()을 사용하여 클릭 한 항목을 확인한 다음 NavigatePage()를 호출 할 수 있습니다. 이 접근법은 훨씬 더 성능이 좋으며 사용자 정의 바인딩을 필요로하지 않습니다.

델리게이트 이벤트 here에 대해 읽을 수 있습니다.