KnockoutJS如何为可观察数组中的每个项添加额外字段？

嘿，我来给你分享几种在Knockout里给observableArray的每个项添加Time字段的实用方法，你可以根据自己的场景选合适的：

1. 初始化数组前预处理数据（最常用） #

如果是从后端刚拿到数据还没放进observableArray，直接先遍历原始数据给每个项加上Time字段，再初始化数组就行。Time字段可以把时间戳转成你需要的可读格式，比如：

// 假设这是你从后端获取的原始数据
const rawMsgData = [
  { dateCreated: 1527677106000, id: 1, message: "Hello", messageStatus: "UNREAD", receiver: "James", sender: "Bassey" },
  // 其他消息项...
];

// 预处理每个消息，添加Time字段（这里用toLocaleString生成本地化时间，你也可以自定义格式）
const processedMsgs = rawMsgData.map(msg => ({
  ...msg,
  Time: new Date(msg.dateCreated).toLocaleString()
}));

// 初始化Knockout的observableArray
this.messages = ko.observableArray(processedMsgs);

2. 给已存在的数组项批量添加字段 #

如果你的observableArray已经有数据了，想要给现有项补上Time字段，直接遍历数组修改每个对象就行：

// 遍历数组里的每一项
this.messages().forEach(msg => {
  // 给当前项添加Time属性，转换时间戳为可读格式
  msg.Time = new Date(msg.dateCreated).toLocaleString();
});

注意：因为我们修改的是数组内对象的属性，不是替换整个数组，所以不需要调用valueHasMutated()。之后新增项的时候，记得也要给新项加上Time字段哦。

3. 用计算属性动态生成（适合动态更新场景） #

如果不想修改原始对象，或者希望Time能随着dateCreated的变化自动更新，可以把每个消息项封装成一个带有计算属性的类：

// 定义消息模型
function Message(data) {
  // 把原始数据的属性赋值过来，要是需要响应式的话可以改成observable
  this.dateCreated = data.dateCreated;
  this.id = data.id;
  this.message = data.message;
  this.messageStatus = data.messageStatus;
  this.receiver = data.receiver;
  this.sender = data.sender;

  // 用computed动态生成Time，要是dateCreated是observable的话，修改它会自动更新Time
  this.Time = ko.computed(() => {
    return new Date(this.dateCreated).toLocaleString();
  }, this);
}

// 把原始数据转成Message实例再放进observableArray
const processedMsgs = rawMsgData.map(msg => new Message(msg));
this.messages = ko.observableArray(processedMsgs);

之后在页面绑定的时候，直接用data-bind="text: Time"就能显示格式化后的时间啦~

内容的提问来源于stack exchange，提问作者Thanus