使用knockout渲染HTML日历以绑定值

Question

如何使用knockout绑定创建以下日历网格？：

将有7列。 （每天一个）。表格的第一行（标题）将包含日期和日期。第二行将包含相应日期的值。下一行将是另一个标题，后面再跟着值。重复到月底。

我将所有数据都放在一个可观察的集合对象中：

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列之后包装网格。

有什么想法吗？

Answer 1

演示链接：JsFiddle

创建2个模板和一个容器

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

第一个负责呈现日期框：

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

第二个是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