How can I create an associative array of objects using KnockoutJS

Question

I am new to knockoutJS, but I'm working on storing this Vessel object into an Observable array. At the same time, I need to be able to be able to search for a specific object in the array by its unique id (mmsi) or its name. I assume that in order to do this, the array must be associative so that you can search through all the keys until you find the value you've searched. However, I'm not confident of my implemetation of this and could use some guidance.

Here is what I have:

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

My apologies if this is completely wrong, but any help is appreciated. Thank you.

Answer 1

I don't really think you need to do an associative array. You can get direct access to a knockout object through various types of binding. Here's a simple solution took me like 10 minutes to knockout.

In order to edit, since everything is observable, just hide/show form fields in line makes it stupid simple. When you are done click done and everything has already been updated.

It will at least give you an example of what you can do.

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/