我的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表格上呈现它:
<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()变量中更新。我在这里想念什么吗?
最佳答案
淘汰赛实际上并不能很好地处理嵌套的普通可观察变量,而且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>
关于javascript - knockout 2d可观察阵列未更新,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50392412/