[英]How can I create an associative array of objects using KnockoutJS
I am new to knockoutJS, but I'm working on storing this Vessel object into an Observable array.我是knockoutJS 的新手,但我正在努力将这个Vessel 对象存储到一个Observable 数组中。 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.
同时,我需要能够通过其唯一 id (mmsi) 或其名称在数组中搜索特定对象。 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.
谢谢你。
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/ https://jsfiddle.net/64m35xca/28/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.