CODEWITHSUNDEEP
htmlknockout.js
hrezs
hrezs

Reputation: 782

knockout multiple with bindings

I have a page with several view models, and i need to dynamically build out a checkbox grid based on 2 of them.

This code populates the grid based on 1 view model:

<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne">
        <table class="table table-hover">
            <thead>
                <tr data-bind="foreach: modelOneArray">
                    <!-- ko if: $index() == 0 -->
                        <th></th>
                    <!--  /ko -->
                    <th data-bind="text: name" ></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: modelOneArray2">
                <tr data-bind="foreach: $parent.modelOneArray" >
                    <!-- ko if: $index() == 0 -->
                        <td data-bind="text: $parent.name"></td>
                    <!--  /ko -->
                    <td><input type="checkbox"></input></td>
                </tr>
            </tbody>    
        </table>
    </div>

Which gives me a grid of:

     header1  header2
row1 checkbox checkbox
row2 checkbox checkbox

but what I need is something closer to this:

<div id="fundingDetailLevels" class="scroll-adjust" data-bind="with: modelOne, modelTwo">
        <table class="table table-hover">
            <thead>
                <tr data-bind="foreach: modelOneArray">
                    <!-- ko if: $index() == 0 -->
                        <th></th>
                    <!--  /ko -->
                    <th data-bind="text: name" ></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: modelTwoArray">
                <tr data-bind="foreach: $parent.modelOneArray" >
                    <!-- ko if: $index() == 0 -->
                        <td data-bind="text: $parent.name"></td>
                    <!--  /ko -->
                    <td><input type="checkbox"></input></td>
                </tr>
            </tbody>    
        </table>
    </div>

but that fails to find modelTwo

Upvotes: 1

Views: 539

Answers (1)

rwisch45
rwisch45

Reputation: 3702

If you just make one view model then you can acheive what you are after. Try this:

        var baseModel = function () {
            var self = this;

            self.modelOneArray = ko.observableArray([{ "name": "Jack" }, { "name": "Jimmy" }]);
            self.modelTwoArray = ko.observableArray([{ "name": "Jack2" }, { "name": "Jimmy2" }]);
        };

        var myModel = myModel || {};

        myModel = new baseModel();
        ko.applyBindings(myModel);

and the html:

<div id="fundingDetailLevels" class="scroll-adjust">
    <table class="table table-hover">
        <thead>
            <tr data-bind="foreach: modelOneArray">
                <!-- ko if: $index()==0 -->
                <th></th>
                <!-- /ko -->
                <th data-bind="text: name"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: modelTwoArray">
            <tr data-bind="foreach: myModel.modelOneArray">
                <!-- ko if: $index()==0 -->
                <td data-bind="text: myModel.modelOneArray().name"></td>
                <!-- /ko -->
                <td>
                    <input type="checkbox"></input>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 1

Related Questions