如何使用KnockoutJS创建对象的关联数组

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.

我是knockoutJS的新手,但我正在努力将这个Vessel对象存储到一个Observable数组中。同时,我需要能够通过其唯一ID(mmsi)或其名称搜索数组中的特定对象。我假设为了做到这一点,数组必须是关联的,这样你才能搜索所有的键,直到找到你搜索过的值。但是,我对我的实现没有信心,可以使用一些指导。

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.

如果这是完全错误的,我道歉,但任何帮助表示赞赏。谢谢。

1 个解决方案

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

我真的认为你不需要做一个关联数组。您可以通过各种类型的绑定直接访问挖空对象。这是一个简单的解决方案,我花了10分钟才能淘汰赛。

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/

#1