2012-08-03 107 views
1

我如何使用淘汰赛结合?: enter image description here利用基因敲除绑定值

创建以下的日历电网将有7列渲染HTML日历。 (每天一个)。表格的第一行(标题)将包含日期和日期。第二行将包含相应日期的值。下一行将是另一个标题,再后面是值。重复,直到月底。

我有我的一个观察的集合对象中的所有数据:

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约束力,但无法弄清楚如何第七列之后敷格。

任何想法?

回答

5

链接到演示:JsFiddle

创建2个模板和容器

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

第一个是负责渲染日期框:

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

第二个是resposible 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功能准备好后阵来渲染子模板。这是我的第一个想法。可以有更高效的解决方案。

编辑:

这里是思想的简单implemantation不加详细说明:JsFiddle