Knockout.js 使用敲除绑定值呈现HTML日历_Knockout.js

Knockout.js 使用敲除绑定值呈现HTML日历

knockout.js

Knockout.js 使用敲除绑定值呈现HTML日历,knockout.js,Knockout.js,如何使用敲除绑定创建以下日历网格：将有7列。（每天一个）。表格的第一行（标题）将包含日期和日期。第二行将包含相应日期的值。下一行是另一个标题，后面跟着值。重复这个步骤直到月底我的所有数据都在一个可观察的收集对象中： function CalendarDate(id, date, volume) { var self = this; self.id = ko.observable(id); self.date = ko.observable(date); se

如何使用敲除绑定创建以下日历网格：

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

有什么想法吗？

链接到演示：

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

函数splitDateArray（）{
/**拼接可观测阵列4或5子阵列取决于一年中的月份**/
变量子数组_one/*包含7个日期*/
var子数组_two/*包含7个日期*/
var子数组_three/*包含7个日期*/
var子数组_four/*包含7个日期*/
var子数组_five/*包含0-3个日期*/
/**然后创建动态dom对象，并将每个数组单独应用于模板**/
var week1=$（“”）；
$（“#容器”）。追加（第一周）；
applybindingstoode（$（“#w1”）.get（0），{template:{name:'week'，data:subArray_one}}）；
…对其他阵列应用相同的模式。。。
applybindingstoode（$（“#w2”）.get（0），{template:{name:'week'，data:subArray_two}}）；
applybindingstoode（$（“#w3”）.get（0），{template:{name:'week'，data:subArray_three}}）；
applybindingstoode（$（“#w4”）.get（0），{template:{name:'week'，data:subArray_four}}）；
applybindingstoode（$（“#w5”）.get（0），{template:{name:'week'，data:subArray_five}}）；

}

总结：

准备好数组后，使用ko.applybindingstoode函数渲染子模板。这是我的第一个想法。可以有更有效的解决方案

编辑：

下面是这个想法的一个简单实现，没有任何细节：