Posted at

Knockoutjs の with の代わりに template も使える子です

More than 3 years have passed since last update.


with と template と foreach

with/foreachはコンテキストが切り替わるからhtmlがカオスになりがち。


  • 今のコンテキスト($data)はなんだ?

  • $rootから再度ツリーを参照しまくったり。



適当なviewmodel

var vm = {

book:{
title:"ハイキュー!!",
reviews:[
{review:"16巻でた!"},
{review:"熱い!"},
{review:"かっこいい!!"}
]
}
}
// ko.applyBindings(vm, document.getElementById("container"));

こんな感じに表示する(ダサい…)


withを使った場合

foreachのせいでwithの恩恵は1回しか得られない


withを使った場合

<div id="container">

<div data-bind="with:book">
<div data-bind="text:title"></div>
<ul data-bind="foreach:{data:reviews, as:'review'}">
<li data-bind="text:$root.book.title + review"/>
</ul>
</div>
</div>


templateを使った場合

bookを変数を取り置ける


templateを使った場合

<div id="container">

<div data-bind="template:{data:book, as:'book'}">
<div data-bind="text:title"></div>
<ul data-bind="foreach:{data:reviews, as:'review'}">
<li data-bind="text:book.title + review"/>
</ul>
</div>
</div>


注意


templateはundefinedでも動く(!)


チェック

<!-- ko if:book -->

〜template〜
<!-- /ko -->

で囲うとか必要っぽい。


総括

適宜使い分けよう