如何在Knockoutjs中计算在多行项目中使用的预算的剩余预算

function BudgetViewModel() {
    var self = this;
    
    self.budget = ko.observable(0); // 预算
    self.projects = ko.observableArray([]); // 项目列表

    // 计算剩余预算
    self.remainingBudget = ko.computed(function() {
        var totalSpent = 0;
        // 遍历项目列表，累加已使用的预算
        ko.utils.arrayForEach(self.projects(), function(project) {
            totalSpent += project.spent();
        });
        return self.budget() - totalSpent;
    });
}

function Project(name, spent) {
    var self = this;
    
    self.name = ko.observable(name); // 项目名称
    self.spent = ko.observable(spent); // 已使用的预算
}

<div>
    <label>预算:</label>
    <input type="number" data-bind="value: budget" />
</div>

<div>
    <label>项目:</label>
    <table>
        <thead>
            <tr>
                <th>名称</th>
                <th>已使用预算</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: projects">
            <tr>
                <td><input type="text" data-bind="value: name" /></td>
                <td><input type="number" data-bind="value: spent" /></td>
            </tr>
        </tbody>
    </table>
</div>

<div>
    <label>剩余预算:</label>
    <span data-bind="text: remainingBudget"></span>
</div>

var viewModel = new BudgetViewModel();
ko.applyBindings(viewModel);