带绑定的淘汰赛

Question

我有一个包含多个视图模型的页面，我需要基于其中的 2 个动态构建一个复选框网格。

此代码基于 1 个视图模型填充网格：

<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>

这给了我一个网格：

     header1  header2
row1 checkbox checkbox
row2 checkbox checkbox

但我需要的是更接近这个的东西：

<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>

但是找不到modelTwo

Answer 1

如果您只制作一个视图模型，那么您可以实现您所追求的。试试这个：

        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);

和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>