如何使用 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 分钟就搞定了。

为了编辑，因为一切都是可观察的，所以只需 hide/show 行中的表单字段就可以使它变得愚蠢简单。完成后点击完成，所有内容都已更新。

它至少会给你一个你可以做什么的例子。

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/

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

How can I create an associative array of objects using KnockoutJS

javascript

associative-array

object

knockout.js

knockout-3.0