Question

我正在关注John Papa关于SPA的快速启动课程，并尝试显示通过ASP.NET Web API加载的客户列表，淘汰赛foreach绑定无法正常工作。 Web API工作正常，我已经在它自己测试它并且它返回正确的JSON，因为我不会发布它的代码。 get方法只返回一个对象数组，每个对象都有Name和Email属性。虽然不是一个好的做法，但是通过在durandal之前加载，淘汰赛全球展现为ko。

我已将customers.js视图模型编码如下

define(['services/dataservice'], function(ds) {
     var initialized = false;

     var customers = ko.observableArray();

     var refresh = function() {
         return dataservice.getCustomers(customers);
     };

     var activate = function() {
          if (initialized) return;
          initialized = true;
          return refresh();
     };

     var customersVM = {
          customers: customers,
          activate: activate,
          refresh: refresh
     };

     return customersVM;
});

我编写的dataservice模块如下（我没有写下函数queryFailed，因为我知道它没有被使用）

 define(['../model'], function (model) {
     var getCustomers = function (customersObservable) {
          customersObservable([]);

          var options = {url: '/api/customers', type: 'GET', dataType: 'json'};

          return $.ajax(options).then(querySucceeded).fail(queryFailed);

          function querySucceeded(data) {
               var customers = [];

               data.forEach(function (item) {
                   var c = new model.Customer(item);
                   customers.push(c);
               });

               customersObservable(customers);
          }
     };

     return {
          getCustomers: getCustomers
     };
 });

最终，模型模块的构建如下：

define(function () {

    var Customer = function (dto) {
        return mapToObservable(dto);
    };

    var model = {
        Customer: Customer
    };

    return model;

    function mapToObservable(dto) {
        var mapped = {};
        for (prop in dto)
        {
            if (dto.hasOwnProperty(prop))
            {
                mapped[prop] = ko.observable(dto[prop]);
            }
        }

        return mapped;
    }
});

视图只是一个列表，它只是：

<ul data-bind="foreach: customers">
    <li data-bind="text: Name"></li>
</ul>

但这不起作用。任何其他绑定工作，我看了控制台窗口，似乎正在正确填充可观察数组。唯一的问题是这段代码没有在屏幕上显示任何内容。我已经多次查看过这些文件，但我似乎无法找到问题所在。这有什么问题？

Answer 1

您可以使用knockout.js上下文调试器chrome扩展来帮助您调试问题

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof

Answer 2

我没有在您的代码中看到您在ViewModel上调用ko.applyBindings的任何内容。

Answer 3

我知道这个问题有点旧，但我想我会添加我的回复以防其他人遇到我所做的相同问题。

我使用的是Knockout JS 2.1.0版，似乎我可以在foreach循环中显示数据的唯一方法是使用：

$data.property

所以在你的例子中，它将是

$data.Name

希望这有帮助

Answer 4

KO在非容器元素中使用 foreach 时有一个已知问题，如上面

e.g。

<强>

参考：http://knockoutjs.com/documentation/foreach-binding.html

Answer 5

好吧，我花了很多时间在本地问题上才意识到ko HTML评论格式（如果使用的话）应该是这样的：

<!-- ko foreach: arrecadacoes -->

而不是这样：

<!-- ko: foreach: arrecadacoes -->

在: ...

之后未使用

ko

淘汰赛foreach绑定无法正常工作

5 个答案: