ko foreach不工作

时间:2013-03-26 21:37:04

标签: jquery jquery-mobile knockout-2.0

我已经查看了我找到的所有相关的artilcle,其他人似乎能够让这个简单的代码工作

我使用的是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);
            }
    });

1 个答案:

答案 0 :(得分:0)

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