【Knockout.js】idとclass属性をバインディングで指定する

knockoutのdata-bindでidとclassを指定したかったのだが、
検索しても出てこないしドキュメントにも触れられてないし困ってしまった。

動的にid指定することも多いだろうに。。。


結論として、attrバインディングでできました。
一応、公式のattrのところにやんわりとできそうな雰囲気が書かれてはいるんだけども、
実際にサンプルとして載ってないとできないと思っちゃう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../javascript/knockout-3.4.0.js"></script>
</head>
<body>
  お名前:<span data-bind="text: name"></span>

  <script>
    var viewModel = {
      name : "Bob"
    }
    ko.applyBindings(viewModel);
  </script>
</body>
</html>
お名前:Bob

とりあえず公式の一番最初に出てくるサンプルです。
オブジェクトのnameをバインドして表示しています。


では、このspan要素にid指定やclass指定をしてみます

  お名前:<span data-bind="attr: {id: name}"></span>

attrバインドでid属性を指定します。
そのid属性に入れるオブジェクト名を指定してあげればいいです。

<span id="Bob" data-bind="attr: {id: name}">

こんな感じでid属性がバインドされた値になっているはずです。

同様にclassもattrで指定できます。

  お名前:<span data-bind="attr: {class: name}"></span>
<span class="Bob" data-bind="attr: {id: name}">