Knockout.js/attrバインディング

提供: MonoBook
ナビゲーションに移動 検索に移動

Knockout.jsattrバインディングとは、パラメーターの値に応じ、関連付けられたDOM要素のあらゆる属性を追加または削除する可視バインディングのひとつである。

たとえばimgタグのsrc属性とtitle属性を動的に変更したい場合にattrバインディングを使うと便利である。

パラメーター[編集 | ソースを編集]

attrバインディングの基本的な書式は以下のとおりである。

<div data-bind="attr: { 属性名: 値 }">...</div>

attrバインディングはカンマ区切りで複数指定もできる。

<div data-bind="attr: { 属性名: 値, 属性名: 値, ... }">...</div>

attrバインディングの記述例。

<div data-bind="attr: { src: imageUrl, title: imageTitle }">...</div>

属性名について[編集 | ソースを編集]

HTMLで用意されている属性名は基本的にアルファベットだけなので問題ないが、XHTMLなどのXMLであったり、ユーザーが勝手に追加した属性名であったりした場合には、属性名にハイフンなどのJavaScriptの変数名として使えない文字列となる可能性がある。

たとえば以下のようにattrバインディングの属性名として「data-something」とは書けない。

<div data-bind="attr: { data-something: someValue }">...</div>

JavaScriptの変数の命名規則の関係で使えない属性名を指定したい場合には、属性名をクォートで囲みリテラル文字列にしてしまうとよい。

<div data-bind="attr: { 'data-something': someValue }">...</div>

使用例[編集 | ソースを編集]

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>knockout.js - attrバインディング 001</title>
  <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="knockout-2.0.0.js"></script>
  <script type="text/javascript">
    jQuery(function() {
      // ビューモデル
      var AppViewModel = function() {
        this.url   = ko.observable("http://knockoutjs.com/");
        this.title = ko.observable("のっくあうと公式さいと");
      }
      // バインディング適用
      ko.applyBindings(new AppViewModel());
    });
  </script>
</head>
<body>
  <a data-bind="attr: { href: url, alt: title }">ノックアウト!!!</a>
</body>
</html>

関連項目[編集 | ソースを編集]

参考文献[編集 | ソースを編集]

外部リンク[編集 | ソースを編集]