Knockout.js/attrバインディング - 版の履歴

imported>Administrator: /* 使用例 */

2012-04-20T08:11:54Z

使用例

← 古い版		2012年4月20日 (金) 08:11時点における版
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/");

imported>Administrator: Knockout/attrバインディングをKnockout.js/attrバインディングへ移動

2012-04-11T16:25:21Z

Knockout/attrバインディングをKnockout.js/attrバインディングへ移動

← 古い版	2012年4月11日 (水) 16:25時点における版
(相違点なし)

2012年4月11日 (水) 16:25にimported>Administratorによる

2012-04-11T16:25:11Z

← 古い版		2012年4月11日 (水) 16:25時点における版
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/可視バインディング\|可視バインディング]]

	== 参考文献 ==		== 参考文献 ==

imported>Administrator: Knockout/attrをKnockout/attrバインディングへ移動

2012-04-11T09:20:51Z

Knockout/attrをKnockout/attrバインディングへ移動

← 古い版	2012年4月11日 (水) 09:20時点における版
(相違点なし)

imported>Administrator: ページの作成：「Knockoutの'''attrバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のあらゆる属性を追加または削...」

2012-04-11T09:20:07Z

ページの作成：「Knockoutの'''attrバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のあらゆる属性を追加または削...」

新規ページ

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

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

== パラメーター ==
attrバインディングの基本的な書式は以下のとおりである。
<source lang="html5">
<div data-bind="attr: { 属性名: 値 }">...</div>
</source>

なお、カンマ区切りで複数指定もできる。
<source lang="html5">
<div data-bind="attr: { 属性名: 値, 属性名: 値, ... }">...</div>
</source>

attrバインディングの記述例。
<source lang="html5">
<div data-bind="attr: { src: imageUrl, title: imageTitle }">...</div>
</source>

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

たとえば以下のようにattrバインディングの属性名として「data-something」とは書けない。
<source lang="html5">
<div data-bind="attr: { data-something: someValue }">...</div>
</source>

[[JavaScript]]の変数の命名規則の関係で使えない属性名を指定したい場合には、属性名をクォートで囲み[[リテラル文字列]]にしてしまうとよい。
<source lang="html5">
<div data-bind="attr: { 'data-something': someValue }">...</div>
</source>

== 使用例 ==
<source lang="html5">
<!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>
</source>

== 関連項目 ==
* [[Knockout]]
** [[Knockout/可視バインディング|可視バインディング]]

== 参考文献 ==
<references/>
== 外部リンク ==

{{stub}}