Question

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

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

一切正常，除非我尝试开始使用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数组，并且在单击“设置预算”按钮后填充了预算数组，但是假设表中没有任何内容发生到（目前）只显示每周开始日期的清单。

Answer 1

正如Bryan Dellinger在评论中指出的那样，push存在问题。我不会说它确实是一个语法错误 - 你真的是将元素推送到数组。 您正在修改底层数组的问题，它不会触发更新通知。当您在observable上直接使用push时，敲除功能会触发更新通知< / p>

对于修改数组内容的函数，例如push和splice，KO的方法会自动触发依赖关系跟踪机制，以便所有已注册的侦听器都会收到更改通知，并且UI会自动更新。 [1]

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

如何让Knockout js foreach工作

1 个答案: