CODEWITHSUNDEEP
knockout.js
rlcrews
rlcrews

Reputation: 3562

Nested binding to observable collection not working in knockout.js

With a page I have the following table 

        <table>
            <tbody data-bind="foreach: myfilters">
                <tr>
                    <td data-bind="with: $root.iqReports">
                        <select data-bind="options: SelectedAttributes(), optionsText: function(SelectedAttributes){ return SelectedAttributes.NameHierarchy() + '.' + SelectedAttributes.LabelName() },  optionsCaption:'Select a Field...'"></select>  
                    </td>
                    <td>
                        <select data-bind="options: $root.filterOperators, value:operator, optionsText: 'operatorName'">
                        </select>
                    </td>
                    <td>
                        <input data-bind="value: criteria1" />
                    </td>
                    <td>
                        <input data-bind="value: criteria2" />
                    </td>
                    <td>
                        <select data-bind="options: $root.joinOperators, value:joinOperator, optionsText: 'joinName'">
                        </select>
                    </td>
                    <td>
                        <a class="attributeLink" data-bind="click: $root.removeFilter">Remove</a>
                    </td>
                </tr>
            </tbody>
        </table>

The collection my filters populates the necessary elements correctly. Where I am struggling is with the first cell where I am trying to populate a select element using another observable collection (iqReports). When I run the page firebug does not report any errors but the element is empty.

HTML from Firebug:

<td data-bind="with: $root.iqReports"></td>

I realize something is wrong with attempting to bind in this fashion because moving the select element outside of the works fine.

Can anyone provide some insight as to how to setup this type of binding?

Update: Here is a partial fiddle that shows the markup used in creation of the filters and report object http://jsfiddle.net/rlcrews/e7z93/

-cheers

Upvotes: 0

Views: 474

Answers (1)

PW Kad
PW Kad

Reputation: 14995

I don't see an iqReports object or observable in your view model only an iqReport. Change your html to reflect an iqReport and see if that tidies it up I can't tell from your fiddle...

And for the record when I am cascading dropdowns in Knockout I make the second list an observable based on the first - 

var self.firstList = ko.observableArray(objects);
var self.firstListSelected = ko.observable(null);

var self.secondList = ko.computed(function () {
    var list = ko.observableArray();
    if (self.firstListSelected() == null) { return list(null); }
    list(getDependentObjectsSomehow());
}

Upvotes: 0

Related Questions