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

列印頁面

上一個

下一個