1

ノックアウト バインディングを使用して次のカレンダー グリッドを作成するにはどうすればよいですか?: ここに画像の説明を入力

7列になります。（毎日1つ）。テーブルの最初の行 (ヘッダー) には、曜日と日付が含まれます。2 行目には、それぞれの日付の値が含まれます。次の行は別のヘッダーになり、値が続きます。月末まで繰り返します。

監視可能なコレクション オブジェクトにすべてのデータがあります。

function CalendarDate(id, date, volume) {
    var self = this;
    self.id = ko.observable(id);
    self.date = ko.observable(date);
    self.volume = ko.observable(volume);
};

function ForecastViewModel() {
    var self = this;
    self.dates = ko.observableArray([]);
}

バインディングを使用する必要があるように感じますがforeach、7 番目の列の後にグリッドをラップする方法がわかりません。

何か案は？

4

1 に答える 1

5

デモへのリンク： JsFiddle

2つのテンプレートとコンテナを作成します

<div id="container" ></div>

最初のものは日付ボックスのレンダリングを担当します：

<script id="datebox" type="text/x-jquery-tmpl">
 ... 
</script>

2番目のものは7日間責任があります：

<script id="week" type="text/x-jquery-tmpl">
  <div data-bind="template: { name : 'datebox'  , foreach : dates }">
</script>

次に、日付配列を分割する関数を準備し、次のようなテンプレートを適用します。

function splitDateArray() {

  /** Splice observable Array 4 or 5 subArray depends on the month of year **/
  var subArray_one   /* contains 7 date */
  var subArray_two   /* contains 7 date */
  var subArray_three /* contains 7 date */
  var subArray_four  /* contains 7 date */
  var subArray_five  /* contains 0-3 date */

  /** Then create dynamic dom object and apply each array indivually to week template **/

  var week1=$("<div id='w1'></div>");
  $("#container").append(week1);

  ko.applyBindingsToNode($("#w1").get(0) , { template: { name: 'week', data: subArray_one  } });

  ... apply the same pattern for other arrays ...

  ko.applyBindingsToNode($("#w2").get(0) , { template: { name: 'week', data: subArray_two  } });

  ko.applyBindingsToNode($("#w3").get(0) , { template: { name: 'week', data: subArray_three  } });

  ko.applyBindingsToNode($("#w4").get(0) , { template: { name: 'week', data: subArray_four  } });

  ko.applyBindingsToNode($("#w5").get(0) , { template: { name: 'week', data: subArray_five  } });

}

概要 ：

配列を準備した後、ko.applyBindingsToNode関数を使用してサブテンプレートをレンダリングします。それが私の最初の考えです。より効率的な解決策があります。

編集 ：

詳細なしのアイデアの簡単な実装は次のとおりです：JsFiddle

于 2012-08-03T13:41:45.183 に答える