Question

How can I create the following calendar grid using knockout binding?:

There will be 7 columns. (one for each day). The first row (header) of the table will contain the day and date. The 2nd row will contain the values for the respective date. The next row will be another header, again followed by values. Repeat until end of the month.

I have all my data in an observable collection object:

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([]);
}

I feel like I should be using a foreach binding, but can’t figure out how to wrap the grid after the 7th column.

Any ideas?

Answer 1

Link to demo : JsFiddle

Create 2 template and a container

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

First one is responsible for rendering date box :

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

Second one is resposible for 7 days :

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

Then prepare a function that splits the date array and apply the templates like this :

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  } });

}

Summary :

Use ko.applyBindingsToNode function to render sub templates after prepared your array. Thats my first thought. There can be more efficient solutions.

EDIT :

Here is a simple implemantation of the idea without details : JsFiddle