淘汰赛2d可观察阵列未更新

UIC 发表于 Dev

UIC

我的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属性的viewmodel ：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。