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

Answer 1

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

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