녹아웃의 다른 observableArray 내의 observableArray에서 요소 제거

Question

녹아웃 튜토리얼 working with lists and collections을 마친 후 녹아웃으로 두 단계 중첩을 구현하기로 조금 더 가려고 결심했습니다.

내 뷰 모델의 구조는 다음과 같습니다

function ViewModel() { 
    this.elements = ko.observableArray([{ 
     id: 1, 
     txt: 'first', 
     el: ko.observableArray(['first', 'second']) 
    },{ 
     id: 2, 
     txt: 'second', 
     el: ko.observableArray(['first', 'third']) 
    },{ 
     id: 3, 
     txt: 'third', 
     el: ko.observableArray(['fourth', 'fifth']) 
    }]); 

    this.remove = function(el){ 
     console.log(el); 
    } 
} 

그래서이 관찰 배열의 관찰 가능한 배열과 같다. 그리고 간단한 2 foreach는보기 - 바인딩이 출력입니다 :

<div data-bind="foreach: elements"> 
    <span data-bind="text: txt"></span> 
    <ul data-bind="foreach: el"> 
     <li data-bind="text: $data, click: $root.remove"> 
    </ul> 
</div> 

문제는 제거 문 (full code is in the fiddle)에 있습니다. 지금까지 가지고있는 요소를 지우지 않고 있습니다. 함수는 내가 삭제하고자하는 요소의 값만을 first처럼 알려주지 만 정확히 삭제해야하는 대상을 유일하게 식별하지 못합니다 (첫 번째 배열 또는 두 번째 배열에서 첫 번째 임).

observableArray 내부의 observableArray에서 요소를 올바르게 제거하는 방법이 있습니까?

당신은 어느 $parent 같은 additional arguments to the click handler를 전달할 수 있습니다

Answer 1

parent context : 다음

<li data-bind="text: $data, click: function() { $root.remove($data, $parent) }"/> 

에 remove 당신은 두 번째 인수를 통해 부모 모음에 액세스하고 그것에서 현재 요소 제거 할 수 있습니다

this.remove = function(data, parent){ 
    parent.el.remove(data); 
} 

을

데모 JSFiddle.