侧面可观察数组中可观察数组的变化不更新淘汰赛js中的UI

Posted 2023-03-27

【中文标题】侧面可观察数组中可观察数组的变化不更新淘汰赛js中的UI

【英文标题】：Change in observable array in side observable array not updating UI in knockout js

【发布时间】：2020-11-13 23:57:00

【问题描述】：

var subject = function (data) 
  self = this;
  self.subjectName = ko.observable(data ? data.subjectName : "");
  self.subjectPassPercentage = ko.observable(data ? data.subjectPassPercentage : "");


var course=function(data)
  self = this;
  self.courseName = ko.observable(data ? data.courseName : "");
  self.subjectList = ko.observableArray([]);

查看模态

app.viewmodal = (function (ko) 
  "use strict";
  var me = 
    subjectObject: ko.observableArray([]),// Array of subject
    course: ko.observableArray([])// Array of course
  
  return me;
  )(ko);

点击后，我正在执行下面的代码

me.course()[0].subjectList().push(me.subjectObject()[0]);

在 html 中我正在尝试打印计数

<div data-bind="text:viewmodal.course()[0].subjectList().length"></div>

但数组 subjectList 中的更改并未反映在 UI 中。它总是显示 0。

但是当我点击下面的 div 时，它会在控制台日志中给出正确的计数。

<div  data-bind="click: function() console.log(viewmodal.course()[0].subjectList().length)">Click Me</div>

请帮助我找出问题并提出解决方案。

【参考方案1】：

这里的问题似乎是那段代码：

me.course()[0].subjectList().push(me.subjectObject()[0]);

调用.subjectList().push(...) 会在可观察对象中解包数组并将对象直接推入其中 - 通过这样做，您将绕过所有 ko 机制。 Documentation 说：pop、push、shift、unshift、reverse、sort、splice 所有这些函数都相当于在底层数组上运行原生 javascript 数组函数，然后通知监听器变化

因此，要解决此问题，您只需在像这样在 observableArray 上调用 push 时删除括号：

me.course()[0].subjectList.push(me.subjectObject()[0]);

这将通知 ko 你的更改并且 UI 应该更新