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

Posted

技术标签:

【中文标题】ko 视图模型在 js 上更新但未在 html 视图中显示【英文标题】:the ko viewmodel is updated on js but not displaying in html view 【发布时间】: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中 【参考方案1】:

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

this.Group = ko.observableArray(group);

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

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

【讨论】:

以上是关于ko 视图模型在 js 上更新但未在 html 视图中显示的主要内容,如果未能解决你的问题,请参考以下文章

选择器视图在选择器视图中显示数字但未在标签上正确显示?

淘汰赛仅更新部分视图模型

Flutter Firebase:Firebase 中的数据更新,但未在屏幕上自动显示计数器更新

一个或多个资源的目标是“头”但未在视图中定义“头”组件

ListBoxFor 未在提交时完全更新视图模型

ko.js学习一