「Knockout.js/attrバインディング」の版間の差分
imported>Administrator |
imported>Administrator 編集の要約なし |
||
| 1行目: | 1行目: | ||
[[Knockout]]の'''attrバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のあらゆる属性を追加または削除する[[Knockout/可視バインディング|可視バインディング]]のひとつである。 | [[Knockout.js]]の'''attrバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のあらゆる属性を追加または削除する[[Knockout.js/可視バインディング|可視バインディング]]のひとつである。 | ||
たとえばimgタグのsrc属性とtitle属性を動的に変更したい場合にattrバインディングを使うと便利である。 | たとえばimgタグのsrc属性とtitle属性を動的に変更したい場合にattrバインディングを使うと便利である。 | ||
| 9行目: | 9行目: | ||
</source> | </source> | ||
attrバインディングはカンマ区切りで複数指定もできる。 | |||
<source lang="html5"> | <source lang="html5"> | ||
<div data-bind="attr: { 属性名: 値, 属性名: 値, ... }">...</div> | <div data-bind="attr: { 属性名: 値, 属性名: 値, ... }">...</div> | ||
| 60行目: | 60行目: | ||
== 関連項目 == | == 関連項目 == | ||
* [[Knockout]] | * [[Knockout.js]] | ||
** [[Knockout/可視バインディング|可視バインディング]] | ** [[Knockout.js/可視バインディング|可視バインディング]] | ||
== 参考文献 == | == 参考文献 == | ||
2012年4月11日 (水) 16:25時点における版
Knockout.jsのattrバインディングとは、パラメーターの値に応じ、関連付けられた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>
関連項目
参考文献
外部リンク
|
この項目「Knockout.js/attrバインディング」は、まだ書きかけの項目です。加筆、訂正などをして下さる協力者を求めています。 |
| このテンプレートは分野別のスタブテンプレート（Monobook:スタブカテゴリ参照）に変更することが望まれています。 | |