我正在尝试更改复杂对象的一项的标志值。 对象结构为:
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
如果我单击该加号,则子列表应该隐藏。如果我再次单击该加号,它应该再次显示子列表。
任何建议都会有帮助。
最佳答案
你必须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/
关于javascript - knockout : Cant access value of observable array using index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41120334/