Làm cách nào để có điều kiện đẩy một mục vào một mảng có thể quan sát được?

Question

Tôi muốn push một mục mới vào số observableArray, nhưng chỉ khi mặt hàng đó chưa có mặt. Có chức năng "tìm" hoặc mẫu được đề xuất nào để đạt được điều này trong KnockoutJS không?

Tôi nhận thấy rằng chức năng remove trên observableArray có thể nhận được chức năng truyền trong điều kiện. Tôi gần như muốn có cùng chức năng, nhưng chỉ đẩy nó nếu điều kiện được truyền vào là hoặc không đúng.

Answer 1

Một ObservableArray cho thấy hàm indexOf (trình bao bọc tới ko.utils.arrayIndexOf). Điều này cho phép bạn thực hiện:

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

Nếu hai bên không thực sự là một tham chiếu đến cùng một đối tượng và bạn muốn chạy Logic so sánh tùy chỉnh, sau đó bạn có thể sử dụng ko.utils.arrayFirst như:

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

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

Answer 2

Cảm ơn RP . Dưới đây là ví dụ về việc sử dụng đề xuất của bạn để trả về thuộc tính 'name' thông qua thuộc tính 'id' của đối tượng từ bên trong mô hình chế độ xem của tôi.

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; 
    }; 

Trong HTML, tôi đã như sau ($ cha mẹ là do này là bên trong một vòng lặp bảng hàng):

<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> 

Answer 3

tìm kiếm một đối tượng trong một 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> 

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

Answer 4

Tôi sẽ thêm "giá trị WillMutate() "trước khi thay đổi và" valueHasMutated() "sau chúng.

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(); 
}