1

如何使用淘汰赛绑定创建以下日历网格？： 在此处输入图像描述

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

有任何想法吗？

4

1 回答 1

5

演示链接： 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

于 2012-08-03T13:41:45.183 回答