녹아웃 js observableArray에서 객체를 제거 할 수 없습니다.

Question

observableArray를 작성하는 두 가지 방법이 있습니다. 하나는 테스트 용이고 다른 하나는이 배열을 사용하는 방법입니다.

첫 번째 방법은 이러한 개체를 정의하고 한 번에 하나씩 푸시하는 방법입니다. 두 번째 방법은 JSON 스트림을 읽고 루프로 푸시하는 것입니다.

다음은이 셔틀 메뉴에 대한 코드입니다.

var StateModel = function() { 
    var self = this; 
    // initialize containers 
    self.leftStateBox = ko.observableArray(); 
    self.rightStateBox = ko.observableArray(); 

    // selected ids 
    self.selectedLeftStateBox = ko.observableArray(); 
    self.selectedRightStateBox = ko.observableArray(); 

    self.moveLeft = function() { 
     var sel = self.selectedRightStateBox(); 
     for (var i = 0; i < sel.length; i++) { 
      var selCat = sel[i]; 
      var result = self.rightStateBox.remove(function (item) { 
       return item.id == selCat; 
      }); 
      if (result && result.length > 0) { 
       self.leftStateBox.push(result[0]); 
      } 
     } 
     self.selectedRightStateBox.removeAll(); 
    } 

    self.moveRight = function() { 
     var sel = self.selectedLeftStateBox(); 
     for (var i = 0; i < sel.length; i++) { 
      var selCat = sel[i]; 
      var result = self.leftStateBox.remove(function (item) { 
       return item.id == selCat; 
      }); 
      if (result && result.length > 0) { 
       self.rightStateBox.push(result[0]); 
      } 
     } 
     self.selectedLeftStateBox.removeAll(); 
    } 


    self.leftStateBox.push({ 
     id: "CAA" 
     , name: 'State 1' 
    }); 
    self.leftStateBox.push({ 
     id: "VAA" 
     , name: 'State 2' 
    }); 
    self.leftStateBox.push({ 
     id: "BAA" 
     , name: 'State 3' 
    }); 

    self.loadStates = function() { 
     var self = this; 
     $.getJSON("${baseAppUrl}/public/company/" + companyId + "/json/searchStates/list", 
      function (searchStatesData) { 
       var states = JSON.parse(searchStatesData).searchStates; 
       for(var i = 0; i < states.length; i++) { 
        self.leftStateBox.push(new State(states[i])); 
       } 
      }); 
    }; 
    self.loadStates(); 
}   

var State = function (state) { 
    var self = this; 
    self.name = ko.observable(state.name); 
    self.id = ko.observable(state.id); 
} 

$(function() { 
    ko.applyBindings(new StateModel(), document.getElementById("statesBox")); 
}); 

여기 내보기 섹션의 :

'<div id="statesBox"> 
    <div> 
     Available States: 
     <select multiple='multiple' data-bind="options: leftStateBox, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedLeftStateBox"></select> 
    </div> 
    <div> 
     <p><button data-bind="click: moveRight">Add Selected</button></p> 
     <p><button data-bind="click: moveLeft">Remove Selected</button></p> 
    </div> 
    <div> 
     Selected States: 
     <select multiple='multiple' data-bind="options: rightStateBox, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedRightStateBox"></select> 
    </div> 
    <br /><br /> 
</div>' 

나는 앞뒤로 내가 수동으로 입력 한 세 가지 작동 목록에 셔틀 가지 시도하지만 가져온 것들에 대한 작동하지 않는 경우 JSON 호출을 통해 그들은 모두 목록에 나타나고 동일한 정보를 갖고있는 것처럼 보입니다. 나는 JSON 객체가 어떻게 보이는지 수동으로 생성 된 객체를 구조화했습니다. JS 함수 moveRight를 추적하면 수동으로 생성 된 객체는 제거되지만 가져온 객체는 제거되지 않습니다. 이 시점에서 내가 뭘 잘못하고 있는지 잘 모르겠다.

나는 this post

Answer 1

는 중요한 차이가 추가하는 항목은에서 셔틀 메뉴 코드를 잡았다.

self.leftStateBox.push({ 
    id: "BAA" 
    , name: 'State 3' 
}); 

... 

var State = function (state) { 
    var self = this; 
    self.name = ko.observable(state.name); 
    self.id = ko.observable(state.id); 
} 

첫 번째 부분에는 관찰 할 수없는 속성 값이 있고 두 번째 부분에는 관찰 가능한 속성 값이 있습니다. 일반적으로 항목을 관찰 할 수 있도록해야합니다 (항목의 이름이나 ID를 변경하려고하십니까?). 속성은 항상 관찰 할 경우

var State = function (state) { 
    var self = this; 
    self.name = state.name; 
    self.id = state.id; 
} 

, 당신은 그냥 직접 "풀다"할 수 있습니다 item.id(). 때때로 관찰 할 수있는 경우 ko.unwrap(item.id)을 사용할 수 있습니다.

var result = self.rightStateBox.remove(function (item) { 
    return ko.unwrap(item.id) == selCat; 
}); 

Answer 2

조작 배열은 쉽게 다음 코드에 의해 KO 관찰 배열에서 항목을 제거 할 수 있습니다 underscore js

를 사용하여 매우 간단합니다.

toRemove는 배열에서 제거 할 개체입니다.