KnockoutJS-属性バインディング

このバインディングにより、ViewModelプロパティを使用してHTML要素*属性*を動的に割り当てることができます。たとえば、ViewModelの値に基づいて、画像のsrc属性、HTMLページの title 属性、またはタグ内のリンクの href を設定できます。

構文

attr: <binding-object>

パラメータ

JavaScriptオブジェクトは、プロパティ名が属性名を参照し、値がDOM要素に渡される必要な値を参照するパラメーターとして渡される必要があります。
複数の属性を一度に割り当てることもできます。あなたがタイトルとhrefの値を割り当てたい場合、バインディングは次のようになります-

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

*courseUrl* および *courseTitle* 変数には、ViewModelで必要な値が設定されます。

ViewModelプロパティが監視可能な値である場合、新しい更新されたパラメーター値に応じて属性が割り当てられます。観測可能な値ではない場合、属性は初めて1回だけ割り当てられます。

例

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 = ("http://finddevguides.com/");
         };

         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>

   </body>
</html>

出力

上記のコードがどのように機能するかを確認するために、次の手順を実行してみましょう-

上記のコードを attr-bind ファイルに保存します。
このHTMLファイルをブラウザーで開きます。
courseUrlは、HTML DOM要素のhref属性に値を割り当てます。

Knockoutjs-attr-binding

目次

KnockoutJS-属性バインディング

構文

パラメータ

例

出力