ko 视图模型在 js 上更新但未在 html 视图中显示答案

【问题标题】：the ko viewmodel is updated on js but not displaying in html viewko 视图模型在 js 上更新但未在 html 视图中显示
【发布时间】：2019-09-01 22:45:38
【问题描述】：

我刚开始使用淘汰赛 js，经过多次测试后，我无法解决这个问题：js 视图模型由我的函数 js 更新，但在浏览器上没有显示视觉变化。这种情况只发生在我称为 TableViewModel 的模型中，对于其他模型，添加其他元素在视图上正常工作。

过去我尝试引用此视图模型的子元素，但我没有必要的信息来修改感兴趣的表（表是 viewModelGroups 元素的父亲）。我在https://knockoutjs.com/documentation/ 和几个论坛上搜索过，但我没有解决这个问题。

这是我在 js 文件中的简短函数（进入 tableViewModel）：

TableViewModel = (function() {
   function TableViewModel(data) {
       var g, group;
       this.id = data.id;
       //...
       //...
       group = (function() {
           var j, len, ref, results;
           ref = data.Group;
           results = [];
           for (j = 0, len = ref.length; j < len; j++) {
               g = ref[j];
               results.push(new GroupViewModel(g));
           }
           return results;
       })();
       this.Group = group;
       return;
   }

   TableViewModel.prototype.newObject = function() {            
       var self = this;
       var ggrrpp = new GroupViewModel(self.Group[0]);
       this.Group.push(ggrrpp);    
   };
   TableViewModel.prototype.toJS = function() {
       var group;
       return {
           id: this.id,
           //...
           //...
           Group: (function() {
               var j, len, ref, results;
               ref = this.Group;
               results = [];
               for (j = 0, len = ref.length; j < len; j++) {
                   group = ref[j];
                   results.push(group.toJS());
               }
               return results;
           }).call(this)
       };
    }; 
    return TableViewModel;    
})();

这是我用来调用上述函数的 html(aspx) 部分：

<div class="row" data-bind="with: Table">
...
...
<i class="config-button fa fa-plus" title="Adding object" aria-hidden="true"
 data-bind="click: function() { newObject(); }"> </i>
   <div data-bind="foreach: Group"> 
   ...
   ...

在newObject函数中，push工作并将对象添加到组列表中（每次调用它都包含之前添加的内容）......但视图不会改变。

提前感谢您的回答。

【问题讨论】：

使您的视图模型成为自调用函数而不是在视图上调用 ko.applyBindings 的任何特殊原因？
@gkb 这通常是 typescript 类转换为构造函数的样子。
ko.applyBinding 用于 viemodel 容器，这个 viewmodel 包含所有的 viewmodel，包括 tableViewModel。我在子模型中做过类似的操作，并且视图已经正确更新了……这个问题只出现在TableViewModel中

标签： html asp.net knockout.js

【解决方案1】：

如果您希望在将新项目添加到 Group 时更新 DOM，则需要将其转换为 observableArray

this.Group = ko.observableArray(group);

另外，在newObject 中，您不能直接在observableArray 上使用括号表示法。您需要先使用括号获取值，然后使用索引器：

var ggrrpp = new GroupViewModel(self.Group()[0])

【讨论】：