绑定不适用于knockoutjs中的集合

问题描述

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

I am trying to use knockout.js to show a specification object on the UI. The specification has a name and it has a few parameterInfo rows. Each ParameterInfo row has a ParameterPartNumber and a bunch of SignalInputs. Each SignalInput has just one property called Name. I am able to show the specification name, the parameterInfo rows and ParameterPartNumber but am not able to show the bunch of SignalInput Names that I have even though the SpecificationModel has the values. I am using the following code:

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 / Knockout代码

<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>

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

When I run the program in debug mode, I can see the following values:

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

很奇怪，因为我能够得到类似的例子，感谢以下问题的答案：

It's strange because I was able to get an almost similar example working thanks to the answers for the following question:

不知何故绑定代码不工作。我缺少什么？

Still, somehow the binding code is not working. What am I missing?

编辑：

：

<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示例问题中，后一个站点工作。

Any idea why? The latter site of lines work in the other stackoverflow example question I cited.

推荐答案

根据我遇到的奇怪绑定错误的经验，它通常源于 for-each 绑定。因为我有这么多的问题，我几乎只是去无容器的路线：

In my experience when you run into weird binding errors, it often stems from the for-each binding. Because I've had so many issues with it, I pretty much just go the "containerless" route:

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

这篇关于绑定不适用于knockoutjs中的集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！