KnockoutJS - 屬性繫結

此繫結允許你使用 ViewModel 屬性動態分配 HTML 元素屬性。例如，你可以根據 ViewModel 中的值，設定圖片的 src 屬性、HTML 頁面的標題屬性或標籤中的連結href。

語法

attr: <binding-object>

引數

應將 JavaScript 物件作為引數傳遞，其中，屬性名稱指屬性名稱，值指傳遞到 DOM 元素所需的期望值。
還可以一次分配多個屬性。假設你想要分配一個標題和一個 href 值，那麼繫結將如下所示 −

<a data-bind = "attr: { href: courseUrl, title: courseTitle}">

courseUrl 和 courseTitle 變數在 ViewModel 中將具有期望值。

如果 ViewModel 屬性是可觀察的值，那麼屬性將根據新的更新的引數值進行分配。如果它不是可觀察的值，那麼屬性僅在第一次時分配一次。

示例

讓我們看一個演示 Attr 繫結的例子。

即時演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS attribute binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <a data-bind = "attr: { href: courseUrl}">
         Click here for free online tutorials and courses.
      </a>

      <script type = "text/javascript">
         function AppViewModel() {
            this.courseUrl = ("https://tutorialspoint.tw/");
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面的程式碼是如何工作的 −

將上面的程式碼儲存到attr-bind.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
courseUrl 將分配值到 HTML DOM 元素中的 href 屬性。

knockoutjs_declarative_bindings.htm

列印頁面

上一步

下一步