jquery - 从具有固定第一列的 knockout View 模型创建动态表

Question

我想根据一个月中的天数创建动态表并对其应用 knockout 绑定(bind)。 到目前为止，我已经创建了基本表并生成了tds。

这是我的 KO View 模型:

 var WorkerModel = function (_workerId, _workerFullName, _daysOfTask) {
     this.workerId = _workerId;
     this.workerFullName = _workerFullName;
     this.daysOfTask = _daysOfTask;
 };

 var AppViewModel = {

     daysInMonth: ko.observable(),
     workersArray: ko.observableArray(),

     getWorkers: function () {
       // get workers from server
     }
 }

我创建了 jsfiddle 示例: jsfiddle

问题是，我不知道如何确定 dayOfMonth 是否为 dayOfTask 并向其添加 html 。

foreach: daysInMonth - create td

if (daysOfTask[i] == dayOfMonth) put html: "W" in td

另外我如何使用ko.observable()进行迭代？在 fiddle 中，我将 daysInMonth 设置为 observableArray()，但不知道如何使用 knockout 创建 for 循环。像这样的事情:

daysInMonth = ko.observable(15);

< ko for (i=0; i < daysInMont; i++) >

... some code

< /ko >

基本上我想得到这个表格布局:

Answer 1

您走在正确的道路上。

您可以使用 if 绑定(bind)有条件地显示“W”。您只需要使用 indexOf method (或者如果您的浏览器不支持它，则使用 jQuery、underscore.js 等中存在的实现)检查 daysInMonth 集合中的当前项目是否在 中>daysOfTask 数组。

您可以使用 $data 属性从 daysInMonth 获取当前项目，并使用 $parent 获取实际的 daysOfTask 数组 contextual binding properties :

<!-- ko foreach: $root.daysInMonth-->
    <td>
        <!-- ko if: $parent.daysOfTask.indexOf($data) != -1 -->
            W
        <!-- /ko -->
    </td>
<!-- /ko -->

演示 JSFiddle.