KnockoutJS - If 绑定
此绑定允许您有条件地呈现。如果指定的条件为真，则显示数据，否则不显示。
if 绑定类似于 visible 绑定。不同之处在于，在可见绑定中，底层 HTML 标记实际上保留在 DOM 上，并根据条件使其可见，而在 if 绑定中，HTML 标记会根据条件从 DOM 中添加或删除。
语法
if: <binding-condition>
参数
参数是您想要评估的条件。如果条件评估为 true 或 true 类值，则将处理给定的 HTML 标记。否则，它将从 DOM 中移除。
如果参数中的条件包含可观察值，则每当可观察值发生变化时，都会重新评估条件。相应地，将根据条件结果添加或删除相关标记。
示例
让我们看看下面的示例，它演示了 if 绑定的用法。
<!DOCTYPE html>
<head>
<title>KnockoutJS if 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 = "if: $data.price > 100 ">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>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 if-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
此示例将填充第三列，该列根据价格讨论产品的性质(昂贵与否)。请注意，使用 $data 绑定上下文访问单个属性。
观察
无容器 if
可能存在无法将数据绑定放置在 DOM 元素内的情况。仍然可以借助基于如下所示的注释标记的 container-less 语法执行基本检查。
<!--ko--> 和 <!--/ko-->充当开始和结束标记，使其成为虚拟语法，并将数据绑定为真实容器。
示例
让我们看一下以下示例，该示例演示了无容器语法的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS if binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<!-- ko {if: weekend} -->
<li>Saturday - check if it is weekend.</li>
<li>Sunday</li>
<!-- /ko -->
</ul>
<script>
function AppViewModel() {
this.weekend = false;
}
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述代码保存在 if-container-less.htm 文件中。
在浏览器中打开此 HTML 文件。
knockoutjs_declarative_bindings.html
