javascript - Knockout 2d observable Array 未更新
问题描述
我有 Json 数据:
"visualAttributes": {
"stemAppearance": [
"a",
"b",
"c",
"k",
"l"
],
"foamAppearance": [
"yellow",
"red",
"green",
"blue",
"grey",
],
"adhesionAppearance": [
"y",
"y",
"i",
"o",
"o"
],
"stemAngle": [
"z",
"x",
"c",
"r",
"v",
]
}
解析后,我使用以下代码在我的视图模型中生成 2d ObservableArray:
self.visualAttributes = ko.observableArray([]);
self.setVisualAttributes = function(visualAttributes) {
for(attribute in visualAttributes) {
var attr = ko.observableArray();
for(var i=0; i<visualAttributes[attribute].length; i++) {
cell = ko.observable(visualAttributes[attribute][i]);
attr.push(cell);
}
self.visualAttributes.push(attr);
}
}
我通过以下方式在 HTML Table 上呈现它:
<tbody data-bind="foreach : $root.visualAttributes">
<tr>
<!-- ko foreach: $data -->
<td><input type="text" class="form-control" data-bind="value: $data"></input></td>
<!-- /ko -->
</tr>
</tbody>
该表正确呈现,我能够看到这些值。但是,在单元格中编辑任何值时,数据不会在 self.visualAttributes() 变量中更新。我在这里错过了什么吗?
解决方案
Knockout 并不能真正处理嵌套的普通 observables 并且value: $data
非常好......最好制作一个Cell
带有value
属性的视图模型:
function Cell(value) { this.value = ko.observable(value); }
// In loop
var cell = new Cell(visualAttributes[attribute][i]);
attr.push(cell);
// In view
<input data-bind="value: value" />
还有这个奇怪的工作,它确保您绑定到可观察对象的实际引用,而不是未包装的值:
const data = ko.observableArray([
[ ko.observable("1"), ko.observable("2") ],
[ ko.observable("a"), ko.observable("b") ]
])
ko.applyBindings({ data });
const unwrwappedData = ko.pureComputed(
() => data().map(row => row.map(ko.unwrap))
)
unwrwappedData.subscribe(console.log);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<tbody data-bind="foreach: data">
<tr data-bind="foreach: $data">
<td><input type="text" data-bind="value: $parent[$index()]"></td>
</tr>
</tbody>
</table>
推荐阅读
- angular - angular-stl-model-viewer 不更新纹理
- python - 解决错误:Python 中的“列表索引超出范围”
- r - 所有调整方法都会在 spdep 的 localmoran() 中产生相同的调整 P 值
- python - 从字符串末尾删除 [edit]
- css - 弯曲孩子来确定父母的宽度
- angular - 加载 ngFor 后第一页加载时的数据绑定
- excel - 同样简单的公式;不同的工作簿=不同的结果
- delphi - 在 Delphi 项目的 Pre-Build 事件中运行的命令是否有明确的当前目录?
- spring - 如何将属性源添加到 Spring Cloud Stream Binder 的环境
- android - 我们可以在安卓应用程序的内部存储中存储多少数据?