jquery - ko foreach が機能しない

Question

私が見つけたすべての関連記事を確認しましたが、他の人はこの単純なコードを機能させることができるようです

jquery-1.9.1、jquery-mobile-1.3.0、および knockout-2.2.1 を使用しています。これらのライブラリには多くの場合互換性がないことに気付いたので、これを提供しています。これらのライブラリのどれを一緒に使用するべきかを詳しく説明している適切なリソースを見つけることができませんでした。

私の問題は、テンプレートを使用して監視可能な配列をバインドできますが、ノックアウト コンテナーレス foreach を機能させることができないことです。

これは機能します：

<ul data-role="listview" data-insert="true" data-bind="template: { name: 'OfficeTemplate', foreach: CampaignTeams, as: 'Team' }"></ul>
<script type="text/html" id="OfficeTemplate">
    <li>
        <span data-bind="text: TeamName"></span>
    </li>
</script>

これは動作しません：

<ul>
    <!-- ko foreach: CampaignTeams-->
    <li>
        <h1>
            <span data-bind="text: TeamName"></span>
        </h1>
    </li>
    <!-- /ko -->
</ul>

これはさらに複雑になり、ネストされたテンプレートを使用する予定です。クリーンなインライン バインディングがより好まれます。

これをデバッグしていて気付いたのは、コンテナーレス構文を使用すると ko.applyBindings(vm) が失敗することです。

モデルを見る:

var vm = {
    // data
    CampaignTeams: ko.observableArray(null)
};

    // Get Office Summary
    $.ajax({
        type: "GET"
            , url: "/api/SalesTeamData/GetOfficeSummary/?Campaign=" + Campaign
            , datatype: "json"
            , data: ""
            , success: function (data) {
                vm.CampaignTeams = ko.observableArray(data);
                ko.applyBindings(vm);
                $('li[data-role=collapsible]').collapsible({ theme: 'c', refresh: true });
            }
            , error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Error: " + errorThrown);
            }
    });