Javascript 如何使用knockout Js获取当前行的Id以隐藏remove按钮

是否有任何方法可以仅为knockout js中的第一行隐藏delete按钮/div。我有嵌套的模板。如果使用

$index

它会隐藏删除按钮，但对嵌套模板也会执行相同的操作，因为它们将再次具有相同的索引

我试过很多东西，但都不管用。仅当逻辑div是第一行时，我才想隐藏逻辑div的内容。并且此模板使用相同的属性/值重复。下面是HTML部分

提前感谢您的帮助

<ul data-bind="template: { name: 'itemtemplate', foreach: $root.subitemsOf(null) }"></ul>

        <script type="text/html" id="itemtemplate">
            <li>                

                    <div class="logical-div" style="margin-top: 5px; width:250px; border:1px solid gray;display:inline-block">                      
                        <select class='logical-inner-div' data-bind="options: $root.Condition, selectedOptions:logicalConditionSelected , optionsValue: 'logicalConditionVal', optionsText: 'logicalConditionName'" style="width:200px;">
                        </select>                       
                    </div>

                <table class="block" style="margin-top: 5px;">
                    <tr>
                        <td>
                            <select  data-bind="options: $root.tag, selectedOptions:tagSelected , optionsValue: 'tagVal', optionsText: 'tagName'" style="width:80px;">
                            </select>
                        </td>
                        <td>
                            <select  data-bind="options: $root.isNot,selectedOptions:isNotSelected , optionsValue: 'isNotVal', optionsText: 'isNotName'" style="width:80px;">
                            </select> 
                        </td>

                        <td>
                            <select  data-bind="options: $root.alias,selectedOptions:aliasSelected, optionsValue: 'aliasVal', optionsText: 'aliasName'" style="width:300px;">

                            </select> 
                        </td>

                        <td>

                                <a href="#" data-bind="click: $root.removeSegment"><img src="<?php echo Yii::app()->baseUrl . '/images/removeitem.gif';?>" alt="Delete"></a>

                        </td>
                        <td>
                            <button class="add-condition btn btn-primary btn-small" data-bind="click: $root.addNestedSegment" >Add Nested Block</button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <div style="margin-top: 5px;">
                                <ul data-bind="template: {name: 'itemtemplate', foreach: $root.subitemsOf($data)}"></ul>
                            </div>
                        </td>
                    </tr>
                </table>                
            </li>
        </script>

---

您可以检查对象引用，而不是使用$index变量：

<!-- ko if: $data != $root.items()[0] -->
<div class="logical-div">
</div>
<!-- /ko -->

或者使用一些可观察的，比如

<!-- ko if: $data != firstItem() -->
<div class="logical-div">
</div>
<!-- /ko -->

self.firstItem = ko.computed(function() { return self.items()[0]; });

self.firstItem=ko.computed（函数（）{return self.items（）[0]；}）；

那个！=语句中的运算符检查两个对象是否相同（如果它们指向内存中的同一对象）。因为第一个呈现的元素与self.items（）[0]相同，所以knockout将隐藏此div元素（在本例中，ko if不隐藏该元素；它不呈现该元素）

---

你好

放一些代码，很难理解您的观点您可以使用

：first

pseudo。这其中的“嵌套模板”方面在哪里？你能把这件衣服剪下来只做相关的部分吗？一些演示了这个问题的最小版本（比如样式裁剪），你能发布这个模型吗？addNestedSegment做什么？它是否与DOM交互？addNestedSegment添加同一个对象，但它是行的子对象，在该行中已被调用。

<!-- ko if: $data != firstItem() -->
<div class="logical-div">
</div>
<!-- /ko -->

self.firstItem = ko.computed(function() { return self.items()[0]; });