Как создать ассоциативный массив объектов с помощью KnockoutJS

Question

Я новичок в knockoutJS, но я работаю над сохранением этого объекта Vessel в массив Observable. В то же время мне нужно иметь возможность искать конкретный объект в массиве по его уникальному id (mmsi) или его имени. Я предполагаю, что для этого массив должен быть ассоциативным, чтобы вы могли искать все ключи до тех пор, пока не найдете искомое значение. Тем не менее, я не уверен в своей реализации этого и могу использовать некоторые рекомендации.

Вот что у меня есть:

function Vessel(data) { 
 
    this.mmsi = ko.observable(data.mmsi); 
 
    this.lat = ko.observable(data.latitude); 
 
    this.long = ko.observable(data.longitude); 
 
    this.trueheading = ko.observable(data.trueheading); 
 
} 
 

 
function VesselViewModel() { 
 
    // Data 
 
    var self = this; 
 
    self.vessels = new ko.observableArray([]); 
 
    self.assoc = {}; 
 

 
    // Operations 
 

 
    self.addVessel = function(m, lt, lg, th) { 
 
    self.vessels.push(new Vessel({ 
 
     mmsi: m, 
 
     lat: lt, 
 
     long: lg, 
 
     trueheading: th 
 
    })); 
 
    }; 
 
    self.removeVessel = function(vessel) { 
 
    self.vessels.remove(vessel) 
 
    }; 
 

 
    self.UpdateVessel = function(key, item) { 
 
    if (self.assoc[key]) { 
 
     self.assoc[key].value(item) 
 
    } else { 
 
     self.vessels.push(VesselViewModel.assoc[key] = { 
 
     key: key, 
 
     value: ko.observable(value) 
 
     }); 
 
    } 
 
    } 
 
}

Мои извинения, если это совершенно неправильно, но любая помощь приветствуется. Спасибо.

Answer 1

Я действительно не думаю, что вам нужно создать ассоциативный массив. Вы можете получить прямой доступ к объекту нокаута через различные типы привязки. Вот простое решение взяло меня как 10 минут для нокаута.

Чтобы редактировать, поскольку все можно наблюдать, просто скрыть/показать поля формы в строке делает его глупым простым. Когда вы закончите, нажмите «Готово», и все уже обновлено.

Он по крайней мере даст вам пример того, что вы можете сделать.

var model; 
var data = [{mmsi: '12', lat: '12', long: '12', trueheading: '12'}, 
    {mmsi: '13', lat: '13', long: '13', trueheading: '13'}, 
    {mmsi: '14', lat: '14', long: '14', trueheading: '14'}, 
    {mmsi: '15', lat: '15', long: '15', trueheading: '15'}]; 

var Vessel = function (datas) { 
    var self = this; 
    self.mmsi = ko.observable(datas.mmsi); 
    self.lat = ko.observable(datas.lat); 
    self.long = ko.observable(datas.long); 
    self.trueheading = ko.observable(datas.trueheading); 

    self.editing = ko.observable(datas.editing || false); 

    self.editVessel = function() { 
    self.editing(!self.editing()); 
    } 
} 

var viewModel = function (datas) { 

    var self = this; 

    self.vessels = ko.observableArray(ko.utils.arrayMap(datas, function(vesselItem){ 
    return new Vessel(vesselItem); 
    })); 


    self.addVessel = function() { 
    var newVessel = { 
     mmsi: '', 
     lat: '', 
     long: '', 
     trueheading: '', 
     editing: true 
    }; 
    self.vessels.push(new Vessel(newVessel)); 
    } 

    self.removeVessel = function (vessel) { 
    self.vessels.remove(vessel); 
    } 


} 

model = new viewModel(data); 
ko.applyBindings(model); 

https://jsfiddle.net/64m35xca/28/