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

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 -->

で囲うとか必要っぽい。

総括

適宜使い分けよう