绑定不适用于 knockoutjs 中的集合答案

【问题标题】：Binding not working for collections in knockoutjs绑定不适用于 knockoutjs 中的集合
【发布时间】：2012-03-12 18:53:00
【问题描述】：

我正在尝试使用 knockout.js 在 UI 上显示规范对象。该规范有一个名称，它有几个 parameterInfo 行。每个 ParameterInfo 行都有一个 ParameterPartNumber 和一堆 SignalInput。每个 SignalInput 只有一个名为 Name 的属性。我能够显示规范名称、parameterInfo 行和 ParameterPartNumber，但无法显示我拥有的一堆 SignalInput 名称，即使 SpecificationModel 具有这些值。我正在使用以下代码：

HTML 代码：

<div id="specificationHeader">

    Name : <input data-bind='value: Name' />
    <br />
    <br />

</div>

<table>
    <thead>
        <tr>
            <th>
                Parameter Part
            </th>

            <th>
                Signal Inputs
            </th>            
       </tr>
    </thead>
    <tbody data-bind="foreach: ParameterInfos">
        <tr>
            <td>
                <input data-bind='value: ParameterPartNumber' />
            </td>

            <td>
                <ul data-bind="foreach: SignalInputs">                    
                    <li><span data-bind='text: Name' /></li>
                </ul>
            </td>            
        </tr>
    </tbody>
</table>

Javascript/敲除代码：

<script type="text/javascript">

    var SpecificationModel = function (specification) {

        var self = this;

        self.Name = ko.observable(specification.Name);

        self.ParameterInfos =   ko.observableArray(ko.utils.arrayMap(specification.ParameterInfos, function (ParameterInfo) {
            return { ParameterPartNumber: ParameterInfo.ParameterPartNumber, SignalInputs: ko.observableArray(ParameterInfo.SignalInputs) };
        }));

    };

    var specificationData = '@Html.Raw(ViewBag.SpecificationData)';
    var viewModel = new SpecificationModel($.parseJSON(specificationData))
    ko.applyBindings(viewModel);

</script>

当我在调试模式下运行程序时，我可以看到以下值：

var specificationData = '{"Name":"Specification One",
                          "ParameterInfos": [{"ParameterPartNumber":"26-20700-002", "SignalInputs":[{"Name":"Park Brake"},{"Name":"Neutral"}]} ]}';

这很奇怪，因为由于以下问题的答案，我能够得到一个几乎相似的示例：

Need to pass initial viewmodel data from ASP.NET MVC to knockout.js

但不知何故，绑定代码无法正常工作。我错过了什么？

编辑：

好的，以下几行有效：

<td data-bind="foreach: SignalInputs">
    <ul >                    
        <li><span data-bind='text: Name' /></li>
    </ul>
</td>

但是，以下几行没有

<td>
    <ul data-bind="foreach: SignalInputs">                    
        <li><span data-bind='text: Name' /></li>
    </ul>
</td>

知道为什么吗？后一行在我引用的另一个 stackoverflow 示例问题中工作。

【问题讨论】：

也许你可以复制这个小提琴：jsfiddle.net/rniemeyer/qXCLu
感谢@RP Niemeyer。我检查了小提琴，它似乎和我有同样的问题。它不显示 SignalInputs。实际上，它没有显示任何数据。
你用的是什么浏览器？它在 Chrome/IE9/Firefox 中显示 Park Brake 和 Neutral。你在小提琴上看到了什么？
我在 Chrome、IE 9 和 IE 8 上尝试过。在其中任何一个上都不起作用。
您可以检查开发控制台是否有错误或查看网络选项卡吗？否则，单击“管理资源”并尝试导航到 KO 文件的链接。似乎您没有从您的位置正确地获得文件。在所有浏览器中对我来说都很好。

标签： data-binding knockout.js

【解决方案1】：

根据我的经验，当您遇到奇怪的绑定错误时，它通常源于 for-each 绑定。因为我遇到了很多问题，所以我几乎只是走“无容器”路线：

<!-- ko foreach: myItems -->
    <li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->

【讨论】：

我这样修改了我的代码：
现在我确实得到了无序列表，但我得到了最后一个元素两次。知道为什么吗？
更新您的答案，以便我们查看格式。在 cmets 中无法读取。
不错的提示，救了我。 dom 元素上的 foreach 完全是错误的。 $data 似乎没有正确绑定。大家都用这个方法。

【解决方案2】：

我遇到了绑定问题，但我的问题原来是因为我使用的是不支持 foreach 绑定的早期版本 (knockout 1.2.1)。不过，它并没有为无法识别的绑定函数抛出错误，只是当我试图引用集合中的一个元素时，我应该绑定到使其难以调试。

最后我按照这里的答案使用了模板绑定：Stackoverflow: knockout javascript foreach binding

【讨论】：

【解决方案3】：

我记得在 KnockoutJS 文档中读到，绑定遇到 等空元素的问题，他们建议使用 甚至&nbsp; (the latter being a countermeasure to an IE6 bug)。

【讨论】：

【解决方案4】：

不确定这是否相关，因为这个答案是很久以前发布的，但我也遇到了 foreach 的问题。我注意到错误来自敲除中的 jquery 调用（我使用的是 knockout-2.0.0）和 jquery-2.1.1。当我更新到knockout-3.1.0后，这个问题就解决了。

当我通过 nuget 安装 knockout.mapping 时安装了 2.0.0，它可能至少取决于 2.0.0。希望这对某人有所帮助...

【讨论】：