Question

I’ll keep it short. My view model looks like this:

var ViewModel = {
    Cameras: ko.observableArray(),
    Current: ko.observableArray()
};

and I want to do something like this:

<!-- ko foreach: Cameras -->
    <div data-role="collapsible">
        <h3 data-bind="text: CameraName"></h3>
        <!-- ko foreach: Current -->
            <img data-bind="attr: { src: URL }" />
        <!-- /ko -->
    </div>
<!-- /ko -->

CameraName property is from Cameras array and URL property is from Current array, but when I do this I get “Current is not defined”. I’ve looked into nested foreach but there must be something I’m not understanding properly.

Answer 1

Current has to be a property of the item in Cameras.

Like so…

var Camera = function() {
    this.Current = ...
}

You could try Knockout 2.1’s $parent.

<!-- ko foreach: Cameras -->
    <div data-role="collapsible">
        <h3 data-bind="text: CameraName"></h3>
        <!-- ko foreach: $parent.Current -->
            <img data-bind="attr: { src: URL }" />
        <!-- /ko -->
    </div>
<!-- /ko -->