Knockout.js ul li index（）一旦被识别就没有了

Question

我有以下代码可以正常工作

<form class="form-horizontal"> 
        <ul data-bind="foreach: SelectedCategories">
            <li>
                <input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                value: $data" />
                <span data-bind="text: $data"></span>
                <input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                event: {click: $parent.removeCategory.bind($data)}" />
            </li>
        </ul>

但是当我在表单中添加几个隐藏字段但在ul元素之前添加时，浏览器会通知它无法识别index（）

  

无法识别的表达式：输入[data-bind ='attr：{Name：'SelectedCategories ['+ $ index（）+']'}，                                                       价值：$ data']

导致错误的

代码如下所示

<form class="form-horizontal">
        <input type="hidden" data-bind="attr:{Name : 'Product.Id'},
                                        value: Product.Id" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Name'},
                                        value: Product.Name" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Quantity'},
                                        value: Product.Quantity" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Netto'},
                                        value: Product.Netto" />
        <ul data-bind="foreach: SelectedCategories">
            <li>
                <input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                value: $data" />
                <span data-bind="text: $data"></span>
                <input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                event: {click: $parent.removeCategory.bind($data)}" />
            </li>
        </ul>

即使错误消息显示函数index（）返回有效数字，所以一切看起来都不错，除了浏览器返回错误。如果我在ul 之后放置隐藏字段，则不会发生错误。你知道什么会导致这样的问题吗？