KnockoutJS - Visible Binding

上一个
下一个

从此名称可以看出，此绑定导致关联的 DOM 元素根据绑定中传递的值显示或隐藏。

语法

visible: <binding-condition>

参数

  • 当参数转换成为伪假值（例如布尔值 false，或 0，或 null，或 undefined）时，绑定将为 yourElement.style.display 设置 display:none 以使其隐藏。这比 CSS 中的任何现有样式具有更高优先级。

  • 当参数转换成为伪真值（例如布尔值 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>

输出

让我们执行以下步骤，查看以上代码如何工作 −

  • 将以上代码保存到 visible-bind.htm 文件中。

  • 在浏览器中打开此 HTML 文件。

knockoutjs_declarative_bindings.htm
打印页面
上一个
下一个
广告