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

imported>Administrator: /* 使用例 */

2012-04-20T08:11:40Z

使用例

← 古い版		2012年4月20日 (金) 08:11時点における版
36行目:		36行目:
	<script type="text/javascript">		<script type="text/javascript">
	jQuery(function() {		jQuery(function() {
	// ~~モデル~~		// ビューモデル
	var AppViewModel = function() {		var AppViewModel = function() {
	this.valueA = ko.observable(90);		this.valueA = ko.observable(90);

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

2012-04-11T16:24:14Z

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

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

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

2012-04-11T16:24:03Z

← 古い版		2012年4月11日 (水) 16:24時点における版
1行目:		1行目:
	[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のstyle属性の個々のプロパティを追加または削除する[[Knockout/可視バインディング\|可視バインディング]]のひとつである。		[[Knockout.js]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のstyle属性の個々のプロパティを追加または削除する[[Knockout.js/可視バインディング\|可視バインディング]]のひとつである。

	たとえば「負の値のときに文字列を赤くする」などという処理をstyleバインディングを使うことで簡潔明瞭に書ける。なお、変更したいstyle属性のプロパティが複数あるという場合には、CCSクラス単位で追加削除できる[[Knockout/cssバインディング\|cssバインディング]]を使うとよい。		たとえば「負の値のときに文字列を赤くする」などという処理をstyleバインディングを使うことで簡潔明瞭に書ける。なお、変更したいstyle属性のプロパティが複数あるという場合には、CCSクラス単位で追加削除できる[[Knockout.js/cssバインディング\|cssバインディング]]を使うとよい。

	== パラメーター ==		== パラメーター ==
	~~基本的な書式は以下のとおりである。~~		styleバインディングの基本的な書式は以下のとおりである。
	<source lang="html5">		<source lang="html5">
	<div data-bind="style: { CSSプロパティ名: 式 }">...</div>		<div data-bind="style: { CSSプロパティ名: 式 }">...</div>
	</source>		</source>
	~~なお、カンマ区切りで複数指定もできる。~~
			styleバインディングはカンマ区切りで複数指定もできる。
	<source lang="html5">		<source lang="html5">
	<div data-bind="style: { CSSプロパティ名: 式, CSSプロパティ名: 式, ... }">...</div>		<div data-bind="style: { CSSプロパティ名: 式, CSSプロパティ名: 式, ... }">...</div>
	</source>		</source>

	~~記述例。~~		styleバインディングの記述例。
	<source lang="html5">		<source lang="html5">
	<div data-bind="style: { color: value() < 0 ? 'red' : 'black' }">...</div>		<div data-bind="style: { color: value() < 0 ? 'red' : 'black' }">...</div>
20行目:		21行目:
	=== CSSプロパティ名について ===		=== CSSプロパティ名について ===
	「font-weight」や「text-decoration」などの一部のCSSプロパティ名は、[[JavaScript]]の変数名の命名規則でハイフンを使えない関係で、「fontWeight」や「textDecoration」などのように[[キャメルケース]]で置き換える必要があるがあることに注意すること。		「font-weight」や「text-decoration」などの一部のCSSプロパティ名は、[[JavaScript]]の変数名の命名規則でハイフンを使えない関係で、「fontWeight」や「textDecoration」などのように[[キャメルケース]]で置き換える必要があるがあることに注意すること。

	=== 式について ===		=== 式について ===
	式は[[三項演算子]]が一般的だが、あくまで[[JavaScript]]のコードとして認識されるため三項演算子ではなくてもよい。		式は[[三項演算子]]が一般的だが、あくまで[[JavaScript]]のコードとして認識されるため三項演算子ではなくてもよい。
54行目:		56行目:

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

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

imported>Administrator: /* 関連項目 */

2012-04-11T08:32:24Z

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

2012-04-11T08:30:37Z

← 古い版		2012年4月11日 (水) 08:30時点における版
55行目:		55行目:
	== 関連項目 ==		== 関連項目 ==
	* [[Knockout]]		* [[Knockout]]
			** [[可視バインディング]]

	== 参考文献 ==		== 参考文献 ==
	<references/>		<references/>

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

2012-04-11T08:24:28Z

← 古い版		2012年4月11日 (水) 08:24時点における版
1行目:		1行目:
	[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]~~要素のstyle属性の個々のプロパティを追加または削除する可視バインディングのひとつである。~~		[[Knockout]]の'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられた[[DOM]]要素のstyle属性の個々のプロパティを追加または削除する[[Knockout/可視バインディング\|可視バインディング]]のひとつである。

	たとえば「負の値のときに文字列を赤くする」などという処理をstyleバインディングを使うことで簡潔明瞭に書ける。なお、変更したいstyle属性のプロパティが複数あるという場合には、CCSクラス単位で追加削除できる[[Knockout/cssバインディング\|cssバインディング]]を使うとよい。		たとえば「負の値のときに文字列を赤くする」などという処理をstyleバインディングを使うことで簡潔明瞭に書ける。なお、変更したいstyle属性のプロパティが複数あるという場合には、CCSクラス単位で追加削除できる[[Knockout/cssバインディング\|cssバインディング]]を使うとよい。

imported>Administrator: /* パラメーター */

2012-04-11T08:22:12Z

パラメーター

← 古い版		2012年4月11日 (水) 08:22時点における版
8行目:		8行目:
	<div data-bind="style: { CSSプロパティ名: 式 }">...</div>		<div data-bind="style: { CSSプロパティ名: 式 }">...</div>
	</source>		</source>
			なお、カンマ区切りで複数指定もできる。
			<source lang="html5">
			<div data-bind="style: { CSSプロパティ名: 式, CSSプロパティ名: 式, ... }">...</div>
			</source>

	記述例。		記述例。
	<source lang="html5">		<source lang="html5">
17行目:		22行目:
	=== 式について ===		=== 式について ===
	式は[[三項演算子]]が一般的だが、あくまで[[JavaScript]]のコードとして認識されるため三項演算子ではなくてもよい。		式は[[三項演算子]]が一般的だが、あくまで[[JavaScript]]のコードとして認識されるため三項演算子ではなくてもよい。

	~~なお、カンマ区切りで複数指定もできる。~~
	~~<source lang="html5">~~
	~~<div data-bind="style: { CSSプロパティ名: 式, CSSプロパティ名: 式, ... }">...</div>~~
	~~</source>~~



	== 使用例 ==		== 使用例 ==

imported>Administrator: ページの作成：「Knockoutの'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のstyle属性の個々のプロパティを...」

2012-04-11T08:21:40Z

ページの作成：「Knockoutの'''cssバインディング'''とは、パラメーターの値に応じ、関連付けられたDOM要素のstyle属性の個々のプロパティを...」

新規ページ

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

たとえば「負の値のときに文字列を赤くする」などという処理をstyleバインディングを使うことで簡潔明瞭に書ける。なお、変更したいstyle属性のプロパティが複数あるという場合には、CCSクラス単位で追加削除できる[[Knockout/cssバインディング|cssバインディング]]を使うとよい。

== パラメーター ==
基本的な書式は以下のとおりである。
<source lang="html5">
<div data-bind="style: { CSSプロパティ名: 式 }">...</div>
</source>
記述例。
<source lang="html5">
<div data-bind="style: { color: value() < 0 ? 'red' : 'black' }">...</div>
</source>

=== CSSプロパティ名について ===
「font-weight」や「text-decoration」などの一部のCSSプロパティ名は、[[JavaScript]]の変数名の命名規則でハイフンを使えない関係で、「fontWeight」や「textDecoration」などのように[[キャメルケース]]で置き換える必要があるがあることに注意すること。
=== 式について ===
式は[[三項演算子]]が一般的だが、あくまで[[JavaScript]]のコードとして認識されるため三項演算子ではなくてもよい。

なお、カンマ区切りで複数指定もできる。
<source lang="html5">
<div data-bind="style: { CSSプロパティ名: 式, CSSプロパティ名: 式, ... }">...</div>
</source>

== 使用例 ==
<source lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockout.js - html bindding sample 1</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.valueA = ko.observable(90);
this.valueB = ko.observable(20);
}
// バインディング適用
ko.applyBindings(new AppViewModel());
});
</script>
</head>
<body>

<p data-bind="style: { color: valueA() < 30 ? 'red' : 'black' }">Aさん</p>
<p data-bind="style: { color: valueB() < 30 ? 'red' : 'black' }">Bさん</p>

</body>
</html>
</source>

== 関連項目 ==
* [[Knockout]]
== 参考文献 ==
<references/>
== 外部リンク ==

{{stub}}

← 古い版		2012年4月11日 (水) 08:32時点における版
55行目:		55行目:
	== 関連項目 ==		== 関連項目 ==
	* [[Knockout]]		* [[Knockout]]
	** [[可視バインディング]]		** [[Knockout/可視バインディング\|可視バインディング]]

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