knockout.js bind array inside array - arrays

Question

how do I bind a ko.observablsArray inside an array? I have the following viewModel:
function GetBegriffsKetteViewModel () {
var self = this;
self.Begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = -1;
}
var Begriffskette = function () {
var self = this;
var begriffe = new ko.observableArray();
var begriffBez = new ko.observableArray();
}
And in my html I have the following div:
<div id="ausgewaehlteKetten" data-bind="foreach : Begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach : begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>
If I run this code I get the following error:
ReferenceError: begriffBez is not defined
Is there a way to bind an array inside an array? What am I doing wrong?
Thanks
Thomas

Answer 1

First, you should not create knockout objects with new.
wrong: var x = new ko.observable();
correct: var x = ko.observable();
Second, if you want a variable to become an object property, you must assign it to the object instance (this - or, in your case, self).
Minor point: By convention, only constructors should start with a captital letter in JS. So since it's a regular property it would be begriffsketten with a lowercase b.
function BegriffsKetteList() {
var self = this;
self.begriffsketten = ko.observableArray();
self.letzterBegriff = ko.observable(0);
self.aktuelleKette = ko.observable(); // better use an observable here
}
function Begriffskette() {
var self = this;
self.begriffe = ko.observableArray();
self.begriffBez = ko.observableArray();
}
Once you do that, knockout can see the begriffBez and begriffe properties when it renders the view.
<div id="ausgewaehlteKetten" data-bind="foreach: begriffsketten">
<div class="row">
<div class="col-md-2" id="innerDivForEach" data-bind="foreach: begriffBez">
<span data-bind="text: $data" ></span>
</div>
</div>
</div>