有没有办法隐藏knockout js中第一行的删除按钮/div。我有嵌套模板。如果使用 $index
它会隐藏删除按钮,但也会对嵌套模板执行相同的操作,因为它们将再次具有相同的索引。
我尝试了很多方法,但没有任何效果。我只想隐藏 logic-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);
}
}
最佳答案
您可以检查对象引用,而不是使用 $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] 相同,所以 knockout 将隐藏此 div 元素(在这种情况下,ko if 不会隐藏该元素;它不会渲染它)
您好!
关于javascript - 如何使用knockout Js获取当前行的Id以隐藏删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27623560/