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 视图中显示的主要内容,如果未能解决你的问题,请参考以下文章