如何让 Knockout js foreach 工作答案

【问题标题】：How to get Knockout js foreach working如何让 Knockout js foreach 工作
【发布时间】：2017-01-14 17:13:49
【问题描述】：

我正在创建一个简单的预算应用程序来帮助我学习淘汰赛 js。

我想要做的是允许用户输入或加载代表账单列表的 JSON 对象。用户可以输入下一个发薪日的日期并单击“周范围”按钮。然后，如果需要但不是必要的，他们可以输入新账单。这将生成一个数组来存储下一个发薪日的日期。现在，您只需单击 Get Bills 按钮即可从一些硬编码数据中填充 bills 数组。之后单击 Set Budget 按钮来处理 weekRange 数组和 bills 数组。在哪里创建一个代表该周账单的对象，然后将其插入预算数组。

一切正常，除非我尝试使用 foreach 绑定开始显示预算数组，但它失败了。

请参考这个js小提琴代码Budget JS Fiddle 这是处理账单和 weekRange 数组的函数

self.setBudget = function () {
        self.budget.removeAll();
        for (var i = 0; i < self.weekRange().length; i++) {            
            var weekOf = self.weekRange()[i];
            var startDate = moment(weekOf);
            var endDate = moment(self.weekRange()[i + 1]);

            var thisWeeksBill = new weeklyBill();
            thisWeeksBill.startOfWeek(weekOf);       

            for (var j = 0; j < self.bills().length; j++) {
                var date = moment(self.bills()[j].dueDate());

                if (date.isBetween(startDate, endDate, null, '[)')) {  
                    var jsBill= ko.toJS(self.bills()[j]);
                    thisWeeksBill.weeklyBills().push(new bill(jsBill));                   
                    self.bills()[j].dueDate(date.add(1, 'months').format("YYYY-MM-DD"))                     
                }
            }
            thisWeeksBill.weeklyAmount(totalWeeklyBills(thisWeeksBill));
            self.budget().push(thisWeeksBill);             

        }
        console.log(self.budget());
    }

带有 foreach 绑定的表格的 html

<table class="table table-responsive">
        <thead>
            <tr>
                <td>Week Of</td>            
            </tr>
        </thead>
        <tbody data-bind="foreach: budget">
            <tr>
                <td data-bind="textinput: startOfWeek"></td>
            </tr>
        </tbody>
    </table>

如果您打开开发工具并观察控制台，您将看到在单击 WeekRange 按钮后填充了 weekRange 数组，并且在单击了 Set Budget 按钮后填充了预算数组，但假设表中没有任何反应到（目前）只显示每周开始日期的列表。

【问题讨论】：

这是正确的吗？ jsfiddle.net/0c3swuu6/19 看起来您在推送时遇到了一些语法错误。
哇，谢谢你似乎解决了这个问题。我没有意识到在进行推送时我不需要在嵌套对象的父节点上声明打开和关闭括号。

标签： javascript html knockout.js

【解决方案1】：

正如 Bryan Dellinger 在 cmets 中指出的那样，您遇到了 push 的问题。我不会说这真的是一个语法错误——你确实是在将元素推送到数组中。 你正在修改底层数组的问题，它不会触发更新通知。当你直接在 observable 上使用push 时，knockout 的函数会触发更新通知

对于修改数组内容的函数，比如push和splice，KO的方法会自动触发依赖跟踪机制，这样所有注册的监听器都会收到变化通知，你的UI会自动更新。 [1]

我还没有看到任何地方明确表示修改 observable 的底层对象不会触发更新，但这就是行为。不过，在 observable 上使用 valueHasMutated() 函数可以强制更新。因此，如果您想更新底层数组，如果您正在进行许多修改并且只想要一次更新，则可能会跳过更新，那么您可以调用它。

【讨论】：