knockout.js - KnockoutJS foreach ループのネスト

Question

ネストされた foreach ステートメントをレンダリングしようとしてノックアウトと戦っています

ビューモデルがあります

var ViewModel = function (transactions) {
var self = this;
self.transactions = ko.observableArray(ko.utils.arrayMap(transactions, function (transaction) {
    return new Transaction(
        transaction.TransactionId,
        transaction.Items);
}));

私のモデル

var Transaction = function (TransactionId,Items)
{
var self = this;
self.transactionId = ko.observable(TransactionId);
self.items = ko.observableArray(Items);

ページビューでビューモデルをバインドしています

  var viewModel = new ViewModel([{"TransactionId":1007,"Items":[{"ItemId":1,"Description":"123"}]}]);
      ko.applyBindings(viewModel, document.getElementById("process"));

HTMLのカットダウンバージョンは次のようになります

       <ul data-bind="foreach: transactions">
        <li>
            <div class="title" data-bind="text:transactionId"></div>
          <ul data-bind="foreach: items">
          <li>ABC</li>
          <ul>
         </li>

エラーは発生していませんが、順序付けられていないリストがレンダリングされていません。ここで明らかに間違っていることをしていますか？

問題を再現する jsfiddle を作成しました。ここで見つけることができます... JSFiddle