使用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