「Knockout.js/attrバインディング」の版間の差分
ナビゲーションに移動
検索に移動
imported>Administrator |
imported>Administrator (→使用例) |
||
43行目: | 43行目: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(function() { | jQuery(function() { | ||
− | // | + | // ビューモデル |
var AppViewModel = function() { | var AppViewModel = function() { | ||
this.url = ko.observable("http://knockoutjs.com/"); | this.url = ko.observable("http://knockoutjs.com/"); |
2012年4月20日 (金) 08:11時点における最新版
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>