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

但我无法使用索引访问此内容。请告诉我我的错误在哪里以及为什么我无法使用元素索引访问该值。

编辑：

现在我可以切换标志值。但是一旦标志值更新我的列表，视图没有得到更新。请找我的小提琴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另外实现的，但索引器不是。

要查看用户界面上的更改，您必须将show属性转换为ko.observable，并且需要将其更新为：

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

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

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

1 个答案: