0

我正在开发一个使用 knockout.js 和 jQuery Mobile 的项目。我有一个可观察的可观察属性数组。这个可观察的数组通过对服务器的 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 值），将创建一个新的列表分隔行并在其下方显示当天的警报。

无论如何，我该如何编码这个场景？有任何想法吗？

谢谢。

4

1 回答 1

0

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

这是一个如何做到这一点的简单示例：http: //jsfiddle.net/antishok/KXhem/49/

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

于 2012-10-02T04:38:03.690 回答