KnockoutJs学习笔记（七）

if binding与visible binding类似。不同之处在于，包含visible binding的元素会在DOM中一直保存，并且该元素相应的data-bind属性会一直保持，visible binding只是利用CSS来触发元素的可见性。另一方面，if binding是物理地增加或删除包含它的元素，并且元素内的data-bind只有在判断语句为真时才生效。

下面是一个简单的if binding的例子：

js部分：

 var viewModel = {

     displayMessage: ko.observable(false)

 };

 ko.applyBindings(viewModel);

html部分：

 <input type="checkbox" data-bind="checked: displayMessage" /> Display message

 <div data-bind="if: displayMessage">The message.</div>

下面是另一个if binding的例子：

js部分：

 var viewModel = {

     people: ko.observableArray([

         { name: "Kazusa", friends: [ "Chiaki", "Charlie" ] },

         { name: "Yuki", friends: null }

     ])

 };

 ko.applyBindings(viewModel);

html部分：

 <ul data-bind="foreach: people">

     <li>

         Name: <span data-bind="text: name"></span>

         <div data-bind="if: friends">

             Friends: <span data-bind="text: friends"></span>

         </div>

     </li>

 </ul>

页面显示效果如下：

之前已经提到，在if binding中，包含if binding的元素会依照判断语句的真伪来决定自己是否出现在页面中，如果判断语句本身是一个observable，则每当该observable变化时，包含if binding的元素会被动态地添加或是移除，它自身其他的data-bind也会随之生效或是失效。

if binding也支持无容器的控制流语法，一个简单的示例如下：

 <ul>

     <li>Item 1</li>

     <!-- ko if: displayMessage -->

     <li>Message</li>

     <!-- /ko -->

 </ul>

ifnot binding与if binding类似，只不过对判断语句结果的判断正好相反。这里有一个需要注意的地方是，假设viewModel中有一个属性displayMessage是一个observable，则data-bind= "ifnot: displayMessage"与data-bind= "if: !displayMessage()"的效果是一样的。在我们直接绑定observable的时候，我们是不需要添加括号的（个人理解是因为这里不涉及取或是更改observable的值，相应的判断由KO自己去做），而在对observable进行取反操作时，由于需要获取observable的值，我们在调用的时候是需要添加括号的。有的开发人员喜欢使用ifnot binding也是有这部分的原因。

巴特西

KnockoutJs学习笔记（七）

最新文章

热门文章