javascript - knockout : Cant access value of observable array using index

Question

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

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

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

我尝试过的代码

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]: {...}

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

编辑:

现在我可以切换标志值。但是，一旦标志值更新，我的列表中的 View 就不会更新。请找到我的 fiddle 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/