我有两个带有对象的 observableArray
:
self.firstHorizontalLineArr = ko.observableArray([{color: "red", val: 0},{color: "blue", val: 1}]);
self.secondHorizontalLineArr = ko.observableArray([{color: "blue", val: 0},{color: "red", val: 1}])
用这些我创建一个像这样的observableArray
:
self.testArr = ko.observableArray([{first: self.firstVerticalLineArr()},{second: self.secondVerticalLineArr()}]);
但是如果我现在这样做:
<div class="test" data-bind="foreach: testArr">
<div data-bind="text: $data"></div>
</div>
那么$data
只是{object Object]
如何获取 first
和 second
数组的值?例如,这样我就可以获得颜色?我想我需要第二个 foreach,但我不知道还有什么进一步的方法来实现这一点。
最佳答案
要回答所提出的问题几乎是不可能的,但我明白你的问题是什么。这是一种让事情变得更清晰的方法:
function ViewModel() {
var self = this;
self.firstHorizontalLineArr = ko.observableArray([{color: "red", val: 0},{color: "blue", val: 1}]);
self.secondHorizontalLineArr = ko.observableArray([{color: "blue", val: 0},{color: "red", val: 1}])
self.testArr = ko.observableArray([{first: self.firstHorizontalLineArr()},{second: self.secondHorizontalLineArr()}]);
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="test" data-bind="foreach: testArr">
<strong>Original, but "toJSON" so you can see what it is:</strong>
<div data-bind="text: ko.toJSON($data)"></div>
<br>
<strong>Demo 1, again "toJSON" to see what's going on:</strong>
<div data-bind="foreach: !!$data.first ? $data.first : $data.second">
<span data-bind="text: ko.toJSON($data)"></span><br>
</div>
<br>
<strong>Demo 2, rendered:</strong>
<div data-bind="foreach: !!$data.first ? $data.first : $data.second">
<span data-bind="style: { color: color }, text: val"></span><br>
</div>
<hr>
</div>
但是,我建议合并稍微不同的数组,如下所示:
function ViewModel() {
var self = this;
self.firstHorizontalLineArr = ko.observableArray([{color: "red", val: 0}, {color: "blue", val: 1}]);
self.secondHorizontalLineArr = ko.observableArray([{color: "blue", val: 0}, {color: "red", val: 1}])
self.testArr = ko.computed(function() {
return [{
first: self.firstHorizontalLineArr(),
second: self.secondHorizontalLineArr()
}];
});
//[{first: self.firstHorizontalLineArr()},{second: self.secondHorizontalLineArr()}]
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script type="text/html" id="itemTmpl">
<li data-bind="style: { color: color }, text: val"></li>
</script>
<div class="test" data-bind="foreach: testArr">
<strong>Demo 3, rendered:</strong><br>
First:
<ul data-bind="template: { foreach: first, name: 'itemTmpl' }"></ul>
Second:
<ul data-bind="template: { foreach: first, name: 'itemTmpl' }"></ul>
</div>
关于javascript - 带有对象的多个 observableArray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36550829/