Knockout.js 和 jQuery Mobile – 按天分组数组并为每一天设置一个列表分隔符

Question

我正在开发一个使用 knockout.js 和 jQuery Mobile 的项目。我有一个可观察的可观察属性数组。这个 observable 数组通过对服务器的 AJAX 调用 (Web API) 填充 JSON 数据。

// ViewModel
my.vm = function () {
    var
    alarms = ko.observableArray([]),
    loadAlarmsCallback = function (json) {
        $.each(json.Alarms, function (i, p) {
            alarms.push(new my.Alarm()
                .AlarmID(p.AlarmID)
                .StartTime(my.utilities.formatDate(p.StartTime))
                .EndTime(my.utilities.formatDate(p.EndTime))
                .TimeAcknowledged(my.utilities.formatDate(p.TimeAcknowledged))
                .AcknowledgedBy(p.AcknowledgedBy)
                .AlarmType(p.AlarmType)
                .AlarmCategory(p.AlarmCategory)
                .AlarmPriority(p.AlarmPriority)
                .Message(p.Message));
        }),
    loadAlarms = function () {
        my.dataService.getAllAlarms(my.vm.loadAlarmsCallback);
    },
    ...;
    return {
        alarms: alarms,
        loadAlarmsCallback: loadAlarmsCallback,
        loadAlarms: loadAlarms,
        ...
    };
}();

my.vm.loadAlarms();
ko.applyBindings(my.vm);

如您所见，视图模型中数组中的每一行都有一个 StartTime，它实际上是一个日期和时间，它被格式化为 MM/dd/yyyy HH:mm。

在我看来（启用 jQuery Mobile 的 .cshtml 文件），我在 ul/li 标记上为数组设置了 foreach 绑定。

<ul data-bind="foreach: alarms" data-role="listview" data-inset="true" data-theme="c">
    <!-- NEED ONLY ONE list-divider PER DAY -->
    <li data-role="list-divider"><span data-bind="text: StartTime"></span></li>
    <!-- NEED MULTIPLE li TAGS FOR EACH ALARM ON THAT DAY -->
    <li>
        <p><span data-bind="text: AlarmCategory"></span></p>
        ...
    </li>
</ul>

我需要的是每天只显示一个列表分隔线行，并将当天所有单独的警报行分组在该列表分隔线行下。当一天发生变化时（基于视图模型的可观察数组中的 StartTime 值），将创建一个新的列表分隔行并在其下方显示当天的警报。

无论如何，我该如何编写这个场景？有什么想法吗？

谢谢。

Answer 1

一种方法是创建一个计算的 observable alertsPerDay，它构建一个数组，其中每个元素对应一天。该元素的值是一个包含日期的对象（因为您想在视图中显示它）和属于该日期的嵌套警报数组。然后在 HTML 中，您可以为每天的警报设置一个嵌套的 foreach。构建起来并不简单，但也不是太复杂。

下面是一个简单的例子：http://jsfiddle.net/antishok/KXhem/49/

主要思想是您可以以最适合您的视图的方式表示您的数据，然后 KO 绑定本身是微不足道的。