「Knockout.js/applyBindings関数」の版間の差分
imported>Administrator ページの作成:「Knockout.jsの'''applyBindings関数'''とは、Knockout.jsをアクティブ化する(ビューモデルオブジェクトを関連付ける)もっとも...」 |
imported>Administrator |
||
| (同じ利用者による、間の3版が非表示) | |||
| 1行目: | 1行目: | ||
[[Knockout.js]]の'''applyBindings関数'''とは、[[Knockout.js]] | [[Knockout.js]]の'''applyBindings関数'''とは、[[Knockout.js]]をアクティブ化する(ビューモデルとビューを関連付ける)もっとも根幹たる[[関数]]である。 | ||
== 引数 == | == 引数 == | ||
* ko.applyBindings(ビューモデルオブジェクト) | * ko.applyBindings( ビューモデルオブジェクト ) | ||
* ko.applyBindings(ビューモデルオブジェクト, DOM要素) | * ko.applyBindings( ビューモデルオブジェクト, DOM要素 ) | ||
第1引数のみを指定した場合には、全DOM要素(HTML全体)に対してビューモデルオブジェクトが関連付けられる。 | 第1引数のみを指定した場合には、全DOM要素(HTML全体)に対してビューモデルオブジェクトが関連付けられる。 | ||
| 10行目: | 10行目: | ||
</source> | </source> | ||
第2引数にDOM要素を指定した場合には、そのDOM要素以下にのみビューモデルオブジェクトが関連付けられる。[[HTML]]を領域分けして、それぞれに個別のビューモデルを関連付けたい場合にはこちらを使うとよい。 | |||
<source lang="javascript"> | <source lang="javascript"> | ||
ko.applyBindings(new AppViewModel(), document.getElementById('someElementId')); | ko.applyBindings(new AppViewModel(), document.getElementById('someElementId')); | ||
| 23行目: | 23行目: | ||
applyBindings関数を正常に動作させるにはDOMが準備されている必要がある点に注意すること。 | applyBindings関数を正常に動作させるにはDOMが準備されている必要がある点に注意すること。 | ||
HTMLのheadタグ内に書く場合は、素のブラウザ[[JavaScript]]であればonload時、[[jQuery]]であればjQuery関数に指定する[[コールバック関数]]の中で呼び出せば間違いない。 | |||
<source lang="html5"> | <source lang="html5"> | ||
// jQueryでの記述例。 | // jQueryでの記述例。 | ||
| 32行目: | 32行目: | ||
</source> | </source> | ||
なお、[[HTML]]のbody閉じタグの直前にscriptタグを書き、その中でapplyBindings関数を呼ぶという手もある。 | |||
== 関連項目 == | == 関連項目 == | ||
* [[Knockout.js]] | * [[Knockout.js]] | ||
** [[Knockout.js/applyBindings関数|applyBindings関数]] | ** [[Knockout.js/applyBindings関数|applyBindings関数]] | ||
** [[ | ** [[knockout.js/observable関数|observable関数]]([[knockout.js/observableオブジェクト|observableオブジェクト]]) | ||
** [[ | ** [[knockout.js/computed関数|computed関数]] | ||
** [[ | ** [[knockout.js/observableArray関数|observableArray関数]]([[knockout.js/observableArrayオブジェクト|observableArrayオブジェクト]]) | ||
== 参考文献 == | == 参考文献 == | ||