if绑定

if绑定应用在页面元素中，并通过表达式判断是否为元素添加子元素的绑定。if绑定在功能上非常像visible绑定，但在实现上却有很大的不同。visible绑定是为元素添加css样式来控制元素是否显示，if绑定是控制元素的字元素，如果表达式为true，则为元素添加子元素，否则清空子元素。

示例代码：

//.W片段
<label>
 <input type="checkbox" bind-checked="displayMessage" />
 Display message
</label>
<div bind-if="displayMessage">Here is a message. Astonishing.</div>

//.js片段
displayMessage=justep.Bind.observable(false);

当displayMessage为false的时候，div将会被清空；如果为true的时候，div里面的内容才会被添加到dom中显示。

ifnot绑定

ifnot绑定与if的功能相反，当表达式为true的时候，元素的内容会被清空，如果为false的时候，元素的内容会被添加到DOM中。

我们把上面的示例代码改成ifnot绑定：

//.W片段
<label>
 <input type="checkbox" bind-checked="displayMessage" />
 隐藏消息
</label>
<div bind-ifnot="displayMessage">Here is a message. Astonishing.</div>

//.js片段
displayMessage=justep.Bind.observable(false);

看看是不是与if相反呢？

其实，我们可以使用if绑定来实现ifnot的功能：

//.W片段
<label>
 <input type="checkbox" bind-checked="displayMessage" />
 隐藏消息
</label>
<div bind-if="!displayMessage">Here is a message. Astonishing.</div>

//.js片段
displayMessage=justep.Bind.observable(false);

另外，if绑定和ifnot绑定都可以使用虚拟节点来完成绑定：

<ul>
    <li>This item always appears</li>
    <li>I want to make this item present/absent dynamically</li>
</ul>

虚拟节点在这种情况下非常有用。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443