侧面可观察数组中可观察数组的更改未在淘汰赛 js 中更新 UI

Question

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>

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

Answer 1

这里的问题好像是那个代码：

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

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

所以要解决这个问题，你只需要在你的 observableArray 上调用 push 时删除括号：

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

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

侧面可观察数组中可观察数组的更改未在淘汰赛 js 中更新 UI

Change in observable array in side observable array not updating UI in knockout js

knockout-2.0

knockout.js

knockout-validation

knockout-3.0