KnockoutJS：无法使用索引访问可观察数组的值

Question

我正在尝试更改复杂对象项的标志值。 对象结构为：

modelData 
    [0]: 
        Main: xz1
        Sub: a,b,c,d,e
        show: true
    [1]:
        Main: xs1
        Sub: g,h,i,j,k
        show: false

我需要访问这个对象并切换标志值，如果为真我必须将其更改为假，如果为假意味着我必须将其设置为真。

我尝试过的代码

toggleShow: function (item) {
          var index = modelData.indexOf(item);
          modelData[index].show = item.show ? false : true; // should get work but not :(
}

函数内的项目数据是，

item
{...}
    __proto__: {...}
    Main: "AXD"
    Sub: [ fg,jk,ik,ko]
    show: true

modelData 是一个可观察的数组。

modelData
function observable() {
        if (arguments.length > 0) {
            // Write

            // Ignore writes if the value hasn't changed
            if (observable.isDifferent(_latestValue, arguments[0])) {
                observable.valueWillMutat
    [Methods]: {...}
    __proto__: {...}
    _id: 168
    _latestValue: [[object Object]]
    _subscriptions: {...}
    arguments: null
    caller: null
    length: 0
    prototype: {...}

通过使用 _latestValue，我可以获取对象内容。

modelData._latestValue
[[object Object]]
    __proto__: []
    length: 1
    [0]: {...}

但我无法使用索引访问它。请告诉我我的问题出在哪里以及为什么我无法使用元素的索引访问该值。

编辑：

现在我可以切换标志值。但是一旦标志值更新了我的列表，就不会更新。请找到我的小提琴here 输出：

+ Main1
    hello
    hi
+ Main2
    one
    two

如果我点击那个加号，那么子列表应该会被隐藏。如果我再次单击该加号，它应该再次显示子列表。

任何建议都会有所帮助。

Answer 1

您必须 unwrap your observableArray 以获取底层数组，并将 modelData 作为不带参数的函数调用。

所以你需要在[index]之前添加()：

toggleShow: function (item) {
          var index = modelData.indexOf(item);
          modelData()[index].show = item.show ? false : true; 
}

注意：indexOf is working 没有 () 因为它是为 observableArray 额外实现的，但索引器不是。

要查看 UI 上的更改，您必须将您的 show 属性转换为 ko.observable，并且您需要更新它：

toggleShow: function (item) {
          var index = modelData.indexOf(item);
          modelData()[index].show(item.show() ? false : true); 
}

您更新的代码： https://jsfiddle.net/ujs77n7r/