ifnot: <binding-condition>
优质
小牛编辑
133浏览
2023-12-01
Ifnot绑定就是否定if绑定。 它只是另一种结合的味道。
语法 (Syntax)
ifnot: <binding-condition>
参数 (Parameters)
参数是您要检查的条件。 如果条件计算为true或true-like值，则将处理给定的HTML标记。 否则，它将从DOM中删除。
如果参数中的条件包含可观察值，则只要可观察值发生更改，就会重新计算条件。 相应地，将根据条件结果添加或删除相关标记。
例子 (Example)
让我们看一下下面的例子，它演示了ifnot绑定的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS ifnot binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<p><strong>Product details</strong></p>
<table border = "1">
<thead>
<th>Product Name</th><th>Price</th><th>Nature</th>
</thead>
<tbody data-bind = "foreach: productArray ">
<tr>
<td><span data-bind = "text: productName"></span></td>
<td><span data-bind = "text: price"></span></td>
<td data-bind = "ifnot: $data.price < 200 ">Expensive</td>
</tr>
</tbody>
</table>
<script type = "text/javascript">
function AppViewModel() {
self = this;
self.productArray = ko.observableArray([
{productName: 'Milk', price: 100},
{productName: 'Oil', price: 10},
{productName: 'Shampoo', price: 1200}
]);
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在if-not-bind.htm文件中。
在浏览器中打开此HTML文件。
这个例子将填充第三列，它根据价格讨论产品的性质（昂贵与否）。 请注意，使用$ data绑定上下文访问单个属性。