knockout.js - ノックアウトでテンプレートをネストする

Question

私はこのビューモデルを持っています

var ViewModel = function (groups) {
    var self = this;

    self.groups = ko.observableArray(ko.utils.arrayMap(groups, function (group) {
        return {
            planName: ko.observable(group.Key),
            documents: ko.observableArray(ko.utils.arrayMap(group.Values, function(value) {
                return {
                    displayCrudLinks: ko.observable(value.displayCrudLinks),
                    document: ko.observable(value.Document)
                };
            }))
        };
    }));
};

そして、私はこの方法でテンプレートを使用しようとしています (2 番目のテンプレートの内部スパンは、ドキュメントごとに機能していることを確認するためのものであり、最終的にはドキュメント自体のプロパティにバインドする必要があります)。「planName」を取得していますが、その下には何もありません。ドキュメントの foreach が機能していないようです

<script type="text/html" id="documentsTmpl">
    <div class="PlanDocuments">
        <div data-bind="text: planName" class="PlanName">
            <div data-bind="template: { name: 'docFragmentTmpl', foreach: documents }" class="Preview"></div>
        </div>
    </div>
</script>

<script type="text/html" id="docFragmentTmpl">
    <span>Document</span>
</script>

1つのテンプレートだけでは機能させることさえできませんでした

<script type="text/html" id="documentsTmpl">
    <div class="PlanDocuments">
        <div data-bind="text: planName" class="PlanName">
            <div data-bind="foreach: documents" class="Preview">Document</div>
        </div>
    </div>
</script>

マッピング関数に渡すグループには、次の構造があります@

[{Key: "General", Values: [{DisplayCrudLinks: true, Document: {...bunch of simple properties}}, ...]}, ....]

助けてくれてありがとう

編集

バインディングの html を忘れてしまいました

<div id="list" data-bind="template: { name: 'documentsTmpl', foreach: groups }"></div>