knockout.js 侧面可观察数组中可观察数组的更改未更新knockout js中的UI

xt0899hw  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(143)
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>

请帮助我确定问题并建议解决方案。

lp0sw83n

lp0sw83n1#

这里的问题似乎在于代码:

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应该更新

相关问题