javascript - ネストされた/多次元オブザーバブルを使用した剣道テンプレート

Question

私の目標は、ネストされたレベルを持つ単純なナビゲーション ドロップダウン メニューを作成することです (このように)。そして、私はそれのためにオブザーバブルを使いたいと思います(より良い解決策がない限り)。

var menuitems = ko.observable([
    { name: "item1", children: [
        { name: "item1-1", children: []},
        { name: "item1-2", children: []}
    ] },
    { name: "item2", children: [] },
    { name: "item3", children: [
        { name: "item3-1", children: []},
    ] },
    { name: "item4", children: [] }
]);

次に、順序付けられていないリストを使用してナビゲーションを構築します...

<ul>
    <li>
        <a>item1</a>
        <ul>
            <li><a>item1-1</a></li>
            <li><a>item1-2</a></li>
        </ul>
    </li>
    <li>
        <a>item2</a>
    </li>
    ... etc ...
</ul>

テンプレートでこれを行う方法はありますか。ネストされたテンプレートや剣道の階層データソースを hasChildren などで使用しているでしょうか?

これは、私が投稿した以前の SO の質問と非常によく似ていますが、Knockout はもう使用していません。

これを達成するためのアイデアはありますか？

編集：

剣道メニューが適しているかどうかわかりません。いくつかのテンプレートに基づいてビューを読み込むには、各ナビゲーション アイテムが必要です。そのため、各メニュー項目に data-tmpl-type 属性を設定して、アプリがどのテンプレートを読み込むかを認識できるようにします。また、各テンプレートにどのビューをロードするかを知るために、 data-view 属性も必要です...それが理にかなっている場合。

Kendo Menu でこれを行う方法がわかりません。