KnockoutJS - 可见绑定

更新于 2025/1/16 8:07:17

顾名思义，此绑定根据绑定中传递的值使关联的 DOM 元素可见或隐藏。

语法

visible: <binding-condition>

参数

当参数转换为类似 false 的值(例如布尔值 false、0、null 或 undefined)时，绑定会为 yourElement.style.display 设置 display:none，使其隐藏。这比 CSS 中任何现有的样式都具有更高的优先级。
当参数转换为类似 true 的值(例如布尔值 true、非空对象或数组)时，绑定将删除 yourElement.style.display 值，使其可见。
如果这是一个可观察属性，则绑定将在每次属性更改时更新可见性。否则，它只会设置一次可见性。
参数值也可以是 JavaScript 函数或返回布尔值的任意 JavaScript 表达式。DOM 元素根据输出可见或隐藏。

示例

让我们看看下面的例子。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Visible Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>

      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially
         }

         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now
         vm.showMe(true);
      </script>

   </body>
</html>