如何使用敲除Js獲取隱藏隱藏按鈕的當前行的ID

Question

有沒有辦法只為淘汰賽js的第一行隱藏刪除按鈕/ div。 我有嵌套的模板。 如果使用$index它將隱藏“刪除”按鈕，但對嵌套模板也將執行相同的操作，因為它們將再次具有相同的索引。

我嘗試了很多事情，但沒有任何效果。 我只想僅在第一行的情況下隱藏邏輯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>

一些JS部分。

function ItemModel(id, parent_id, initialLogicalVal,initialTagVal,initialIsNotVal,initialAliasVal) {
        var self = this;

        self.id = ko.observable(id);
        self.parentId = ko.observable(parent_id);    
        self.logicalConditionSelected = ko.observable([initialLogicalVal]);
        self.tagSelected = ko.observable([initialTagVal]);
        self.isNotSelected = ko.observable([initialIsNotVal]);
        self.aliasSelected = ko.observable([initialAliasVal]);


    }

    var viewModel = function RecursiveListViewModel(tasks) 
    {
        var self = this;

 // Knock out function for checking the parents
        self.subitemsOf = function (item) {
            var children = ko.utils.arrayFilter(self.items(), function (arrayItem) {
                var parentItemId = (null === item) ? null : item.id();
                return arrayItem.parentId() == parentItemId;
            });
            return children;
        };
        // Knock out function for checking if there are child for this record for populating nested records
        self.hasSubitems = function (item) {
            var firstMatch = ko.utils.arrayFirst(self.items(), function (arrayItem) {
                return (arrayItem.parentId() == item.id());
            });

            return (null !== firstMatch); // At least one item found in array
        };
// Knock out function for Adding the nested/child segment
        self.addNestedSegment = function(item) {

            self.items.push(new ItemModel(++ChildId, item.id(),'and','Tag','Is Not',firstAlias));
        }

        // Knock out function for Adding the Main/Parent segment
        self.addMainSegment = function(data, event) {
            self.items.push(new ItemModel(++ChildId, null,'and','Tag','Is Not',firstAlias));
        }

        // Knock out function for Deleting the segment with all of its children
        self.removeSegment = function(data,item) 
        { 
            self.items.remove(data);
        } 
}

Answer 1

除了使用$ 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.items（）[0]相同，所以剔除將隱藏此div元素（在這種情況下，ko if不會隱藏該元素；它不會渲染該元素）

問候！