Knockout.js/attrバインディング
ナビゲーションに移動
検索に移動
Knockoutのattrバインディングとは、パラメーターの値に応じ、関連付けられたDOM要素のあらゆる属性を追加または削除する可視バインディングのひとつである。
たとえばimgタグのsrc属性とtitle属性を動的に変更したい場合にattrバインディングを使うと便利である。
パラメーター
attrバインディングの基本的な書式は以下のとおりである。
<div data-bind="attr: { 属性名: 値 }">...</div>
なお、カンマ区切りで複数指定もできる。
<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>
関連項目
参考文献
外部リンク
|
この項目「Knockout.js/attrバインディング」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。 |
| このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。 | |
