KnockoutJS中如何垂直展示observableArray内的sessionList数组

我定义了self.PatrolList = ko.observableArray()，其数据结构如下：

// PatrolList 数据示例
0: {DateAdd: 'Tuesday, 01 November 2022', sessionList: ['Patrol_011122168', 'Patrol_011122256']}
1: {DateAdd: 'Wednesday, 02 November 2022', sessionList: Array(4)}

当前视图用以下代码绑定数据时，sessionList会被直接显示为字符串（比如Patrol_011122168,Patrol_011122256）：

<div class="overflow-auto body-overflow" data-bind="foreach:PatrolList">
    <div class="timeline-date" data-bind="text: DateAdd"><i class="fa fa-calendar text-success"></i></div>
        <ul>
           <li class="timeline-content" data-bind="text: sessionList"></li>
       </ul>
    </div>

我需要把sessionList的内容拆分后垂直展示，期望效果：

Tuesday, 01 November 2022
 -Patrol_011122168
 -Patrol_011122256

核心是用Knockout的foreach绑定遍历sessionList数组，为每个数组项单独生成列表元素，修改后的HTML代码如下：

<div class="overflow-auto body-overflow" data-bind="foreach:PatrolList">
    <div class="timeline-date" data-bind="text: DateAdd"><i class="fa fa-calendar text-success"></i></div>
    <ul>
        <!-- 遍历sessionList数组，生成每个列表项 -->
        <li class="timeline-content" data-bind="foreach: sessionList">
            <span>-</span> <span data-bind="text: $data"></span>
        </li>
    </ul>
</div>

补充说明： #

1. 替换原单个<li>的text绑定为foreach: sessionList，实现数组项的循环渲染
2. $data指代当前遍历到的sessionList数组项（即每个巡逻会话ID）
3. 如果不想硬编码-符号，也可以用CSS伪元素实现：

   .timeline-content::before {
       content: "-";
       margin-right: 4px;
   }
   

   对应HTML可简化为：

   <li class="timeline-content" data-bind="foreach: sessionList">
       <span data-bind="text: $data"></span>
   </li>
   

这样就能实现每个会话ID单独一行、带前缀的垂直展示效果。

内容的提问来源于stack exchange，提问作者whatISboolean