淘汰赛foreach绑定不起作用答案

【问题标题】：Knockout foreach binding not working淘汰赛foreach绑定不起作用
【发布时间】：2014-01-10 13:10:50
【问题描述】：

我正在关注 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;
});

我编写的数据服务模块如下（我没有在函数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>

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

【问题讨论】：

区分大小写？您在上面声明属性是名称和电子邮件，但您的绑定显示文本：名称。
@Brad，我在这里写错了。我也在我的代码上写了错误的案例，但即使纠正这个，它仍然不起作用。你还有别的想法吗？感谢您的帮助。
你记得调用applyBindings吗？
控制台中有任何错误信息吗？
你选择了一个解决方案，但你没有提到哪里出了问题

标签： javascript knockout.js durandal

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

$data.property

所以在你的例子中是

$data.Name

希望对你有帮助

【讨论】：

【解决方案3】：

好吧，我只是在一个本地问题上花了很多时间才意识到，如果使用 ko HTML 注释格式，应该是这样的：

<!-- ko foreach: arrecadacoes -->

不是这样的：

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

: 不在ko 之后使用...

【讨论】：

【解决方案4】：

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

【讨论】：

没错，但我正在使用 Durandal，而且我听说 Durandal 会自动呼叫ko.applyBindings。事实上，其他绑定都在工作，只是 foreach 造成了麻烦。可以是别的吗？

【解决方案5】：

KO 在像上面<ul> 这样的非容器元素中使用 foreach 时存在一个已知问题，因此您必须使用无容器控制流语法。

例如

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

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

【讨论】：