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.com/");
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤，了解上面的代码是如何工作的 −

  • 将上面的代码保存到attr-bind.htm 文件中。

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

  • courseUrl 将分配值到 HTML DOM 元素中的 href 属性。

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