2011-12-07 6 views
102

push 새 항목을 보내고 싶습니다 (항목이 아직없는 경우에만). KnockoutJS에서 이것을 달성하기위한 "찾기"기능이나 권장 패턴이 있습니까?관찰 가능 어레이의 항목을 조건부로 밀어 넣는 방법?

나는 observableArray에있는 remove 함수가 조건 전달을위한 함수를받을 수 있다는 것을 알아 챘습니다. 나는 거의 같은 기능을 원하지만, 조건이 통과되었거나 그렇지 않은 경우에만 밀어 넣을 수 있습니다.

답변

221

observableArray는 indexOf 함수 (래퍼를 ko.utils.arrayIndexOf)로 노출합니다. 두 사람은 실제로 같은 객체에 대한 참조하지 않습니다 당신은 다음과 같은 ko.utils.arrayFirst 사용할 수 있습니다, 사용자 정의 비교 로직을 실행하려면

if (myObservableArray.indexOf(itemToAdd) < 0) { 
    myObservableArray.push(itemToAdd); 
} 

:

var match = ko.utils.arrayFirst(myObservableArray(), function(item) { 
    return itemToAdd.id === item.id; 
}); 

if (!match) { 
    myObservableArray.push(itemToAdd); 
} 
+0

itemToAdd의 모든 속성을 비교합니까? Id 속성을 테스트하기 만하면됩니다. – jaffa

+5

두 개체가 완전히 동일한 개체인지 확인합니다. 개별 속성을 검사해야한다면'ko.utils.arrayFirst'를 사용할 수 있습니다. 대답에 샘플을 추가하겠습니다. –

+4

우수 팁,하지만 itemToAdd.id === item.id (item.Add.id() === item.id()로 변경해야했습니다. 다음 답에 코드를 게시했습니다. – Rake36

11

감사 RP를이 당신이 할 수 있습니다 . 다음은 내 뷰 모델 내에서 객체의 'id'속성을 통해 'name'속성을 반환하는 제안을 사용하는 예입니다.

<select data-bind="visible: editing, hasfocus: editing, options: $parent.jobroles, optionsText: 'name', optionsValue: 'id', value: jobroleId, optionsCaption: '-- Select --'"> 
          </select> 
<span data-bind="visible: !editing(), text: $parent.jobroleName(jobroleId), click: edit"></span></td> 
0

가 ko.observableArray

function data(id,val) 
{ var self = this; 
self.id = ko.observable(id); 
self.valuee = ko.observable(val); } 

var o1=new data(1,"kamran"); 
var o2=new data(2,"paul"); 
var o3=new data(3,"dave"); 
var mysel=ko.observable(); 
var combo = ko.observableArray(); 

combo.push(o1); 
combo.push(o2); 
combo.push(o3); 
function find() 
{ 
     var ide=document.getElementById("vid").value;  
     findandset(Number(ide),mysel); 
} 

function indx() 
{ 
    var x=document.getElementById("kam").selectedIndex; 
    alert(x); 
} 

function getsel() 
{ 
    alert(mysel().valuee()); 
} 


function findandset(id,selected) 
{ 
    var obj = ko.utils.arrayFirst(combo(), function(item) { 
    return id=== item.id(); 
}); 
    selected(obj); 
} 

findandset(1,mysel); 
ko.applyBindings(combo); 


<select id="kam" data-bind="options: combo, 
        optionsText: 'valuee', 
        value: mysel, 
        optionsCaption: 'select a value'"> 

        </select> 
<span data-bind="text: mysel().valuee"></span> 
<button onclick="getsel()">Selected</button> 
<button onclick="indx">Sel Index</button> 
<input id="vid" /> 
<button onclick="find()">Set by id</button> 
에서 객체를 검색 : HTML에서

self.jobroles = ko.observableArray([]); 

    self.jobroleName = function (id) 
    { 
     var match = ko.utils.arrayFirst(self.jobroles(), function (item) 
     { 
      return item.id() === id(); //note the() 
     }); 
     if (!match) 
      return 'error'; 
     else 
      return match.name; 
    }; 

, 난 다음 ($ 부모이 테이블 행 루프 내부에 존재에 기인) 한

http://jsfiddle.net/rathore_gee/Y4wcJ/

0

"value WillMutate() "는 변경 전"valueHasMutated() "가 뒤에옵니다.

for (var i = 0; i < data.length; i++) { 
    var needChange = false; 
    var itemToAdd = data[i]; 
    var match = ko.utils.arrayFirst(MyArray(), function (item) { 
     return (itemToAdd.Code === item.Code); 
    }); 
    if (!match && !needChange) { 
     MyArray.valueWillMutate(); 
     needChange = true; 
    } 
    if (!match) { 
     MyArray.push(itemToAdd); 
    } 
} 
if (needChange) { 
    MyArray.valueHasMutated(); 
} 
관련 문제