0

私はknockout.jsとjQueryMobileを使用しているプロジェクトに取り組んでいます。観察可能なプロパティの観察可能な配列があります。この監視可能な配列には、サーバーへの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>

必要なのは、1日に1つのリストディバイダー行だけを表示し、その日のすべての個別のアラーム行をそのリストディバイダー行の下にグループ化することです。日が変わると（ビューモデルの監視可能な配列のStartTime値に基づいて）、新しいリストディバイダー行が作成され、その下にその日のアラームが表示されます。

とにかく、このシナリオをどのようにコーディングできますか？何か案は？

ありがとう。

4

1 に答える 1

0

alertsPerDayこれを行う1つの方法は、各要素が1日に対応する配列を構築する計算されたオブザーバブルを作成することです。要素の値は、日付（ビューに表示するため）とその日に属するアラームのネストされた配列を含むオブジェクトです。foreach次に、HTMLで、毎日のアラームをネストすることができます。構築するのは簡単ではありませんが、それほど複雑でもありません。

これを行う方法の簡単な例を次に示します。http：//jsfiddle.net/antishok/KXhem/49/

主なアイデアは、ビューに最も適した方法でデータを表現できることです。そうすれば、KOバインディング自体は簡単です。

于 2012-10-02T04:38:03.690 に答える