knockout.js - knockout - ko observable();

¿Cómo presionar condicionalmente un elemento en una matriz observable?

Question

Me gustaría push un nuevo elemento en un observableArray , pero solo si el elemento no está presente. ¿Hay alguna función de "búsqueda" o patrón recomendado para lograr esto en KnockoutJS?

Me he dado cuenta de que la función de remove en un observableArray puede recibir una función para pasar en una condición. Casi quiero la misma funcionalidad, pero presionarla solo si la condición aprobada es o no es cierta.

Answer 1

Agregaría "valueWillMutate ()" antes de los cambios y "valueHasMutated ()" después de ellos.

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

Answer 2

Gracias RP. Aquí hay un ejemplo de cómo usar su sugerencia para devolver la propiedad ''nombre'' a través de la propiedad ''id'' del objeto desde mi modelo de vista.

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

En HTML, tengo lo siguiente ($ parent se debe a que está dentro de un bucle de fila de tabla):

<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

Un indexOf observable expone una función indexOf (wrapper a ko.utils.arrayIndexOf ). Esto le permite hacer:

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

Si los dos no son realmente una referencia al mismo objeto y desea ejecutar una lógica de comparación personalizada, entonces puede usar ko.utils.arrayFirst como:

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

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

Answer 4

buscar un objeto en una 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/