knockout.js bind array inside array

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

Sorry I just saw that one line in my html example is missing — Thomas Reimelt
– Thomas Reimelt, Commented Oct 17, 2016 at 14:51
<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> — Thomas Reimelt
– Thomas Reimelt, Commented Oct 17, 2016 at 14:51

Tomalak · Accepted Answer · 2016-10-17 15:12:35Z

3

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>

answered Oct 17, 2016 at 15:12

Tomalak

339k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Reimelt Over a year ago

Thanks a lot. I was the whole day trying to make it work but was allways looking at the html.

Thomas Reimelt Over a year ago

Now it works, but if I add a new element to the array, The view is not refreshed with the new item. Is there a way to archive this,too? I thougth the observalbe would do this.

Tomalak Over a year ago

Yes, it does. It depends on how you add the new element. There are questions about this, try to search. The official documentation also shows how to add items to an observable array. Try to find out on your own first.

Collectives™ on Stack Overflow

knockout.js bind array inside array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related