Javascript 敲除-将单击绑定到嵌套数组子元素

好的，我在使用Knockout时遇到了一个问题，因为它无法解析可观察数组的子元素上的click绑定。我怀疑我的映射有问题，但我无法解决。我创建了一个JSFIDLE：

以下是我的JS：

var PaycheckBudgetItem = function(data) {
    var self = this;
    self.PaycheckBudgetItemId = ko.observable(data.PaycheckBudgetItemId);
    self.PaycheckBudgetId = ko.observable(data.PaycheckBudgetId);
    self.Description = ko.observable(data.Description);
    self.Amount = ko.observable(data.Amount);
    self.DueDate = ko.observable(data.DueDate);
    self.IsPaid = ko.observable(data.IsPaid);
    self.PaidStatus = ko.observable(data.PaidStatus);

    self.updateStatus = function() {
        alert('test');
    };
};

var mapping = {
    'Items': {
        create: function(options) {
            return new PaycheckBudgetItem(options.data);
        }
    }
};

var PaycheckBudget = function(data) {
    var self = this;
    self.PaycheckBudgetId = ko.observable(data.PaycheckBudgetId);
    self.PaycheckBudgetDate = ko.observable(data.PaycheckBudgetDate);
    self.PaycheckBudgetAmount = ko.observable(data.PaycheckBudgetAmount);
    self.Remaining = ko.observable(data.Remaining);
    self.Items = ko.observableArray(data.Items);
    ko.mapping.fromJSON(data.Items, mapping, self.Items);
};

var BudgetListViewModel = function(data) {
    var self = this;
    self.budgets = ko.observableArray(data);
};

var data = [
    {
    "PaycheckBudgetId": 1,
    "PaycheckBudgetDate": "11/9/2012",
    "PaycheckBudgetAmount": 2315,
    "Items": [
        {
        "PaycheckBudgetItemId": 11,
        "PaycheckBudgetId": 1,
        "Description": "Rent",
        "Amount": 400,
        "DueDate": "11/9/2012",
        "IsPaid": "Unpaid",
        "PaidStatus": false},
    {
        "PaycheckBudgetItemId": 12,
        "PaycheckBudgetId": 1,
        "Description": "Cell Phone",
        "Amount": 166,
        "DueDate": "11/9/2012",
        "IsPaid": "Unpaid",
        "PaidStatus": false}
    ],
    "Remaining": 1749},
{
    "PaycheckBudgetId": 2,
    "PaycheckBudgetDate": "11/23/2012",
    "PaycheckBudgetAmount": 2315,
    "Items": [
        {
        "PaycheckBudgetItemId": 3,
        "PaycheckBudgetId": 2,
        "Description": "Rent",
        "Amount": 400,
        "DueDate": "11/23/2012",
        "IsPaid": "Unpaid",
        "PaidStatus": false},
    {
        "PaycheckBudgetItemId": 4,
        "PaycheckBudgetId": 2,
        "Description": "Tuition",
        "Amount": 250,
        "DueDate": "11/23/2012",
        "IsPaid": "Unpaid",
        "PaidStatus": false}
    ],
    "Remaining": 1665}
];

ko.applyBindings(new BudgetListViewModel(data), $('#budget-list-container')[0]);​

这是我的HTML：

<div id="budget-list-container" class="well sidebar-nav">
        <ul class="nav nav-list" data-bind="template: { name: 'budgetTemplate', foreach: budgets, as: 'budget' }">
            <script type="text/html" id="budgetTemplate">
                <li class="nav-header">
                    Paycheck for <span data-bind="text: PaycheckBudgetDate"></span> - <span data-bind="text: formatCurrency(PaycheckBudgetAmount)"></span>
                </li>
                <li>
                    <table class="table table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Amount</th>
                                <th>Due Date</th>
                                <th>Paid/Unpaid</th>
                            </tr>
                        </thead>
                        <tbody data-bind="template: { name: 'budgetItemTemplate', foreach: Items, as: 'budgetItem' }"></tbody>
                    </table>
                        Remaining: <span data-bind="text: formatCurrency(Remaining)"></span>
                    <hr />
                </li>
            </script>
            <script type="text/html" id="budgetItemTemplate">
                <tr>
                    <td><span data-bind="text: Description"></span></td>
                    <td><span data-bind="text: formatCurrency(Amount)"></span></td>
                    <td><span data-bind="text: DueDate"></span></td>
                    <td>
                        <button class="btn-link pull-right update-status" data-bind="text: IsPaid, click: updateStatus" />
                    </td>
                </tr>
            </script>
        </ul>
    </div>​

以下人员的工资支票-


描述
数量
到期日
已付/未付
剩下的：



​

它的肉就是这个。我有两个KO型号，PaycheckBudget和PaycheckBudgetItem。PaycheckBudget包含PaycheckBudgetItem模型的可观察数组。PaycheckBudgetItem模型上有一个名为“updateStatus”的函数，它绑定到我的HTML中的单击事件。加载页面时，出现错误“无法解析绑定。未定义updateStatus”

我假设我的问题在我的项目映射中的某个地方。如果删除click处理程序，所有内容都会正确绑定和显示

如果有人能帮我，也许能指出我遗漏了什么，那将非常有帮助。我对淘汰赛有些陌生，所以我可能错过了一些明显/简单的东西

---

（不，我的小提琴中没有任何数据是敏感的或真实的，只是虚拟数据。：）

我确实回答了你的问题

你的假设是正确的。问题似乎主要在于您的映射。您甚至从未调用PaycheckBudget类的构造函数。例如，您的BudgetListViewModel构造函数如下所示：

var BudgetListViewModel = function(data) {
    var self = this;
    self.budgets = ko.observableArray(data);
};

但可能应该是这样的：

var BudgetListViewModel = function(data) {
    var self = this;
    self.budgets = ko.observableArray(ko.utils.arrayMap(data, function(item){
        return new PaycheckBudget(item);
    }));
};

我已经对您的JSFIDLE进行了一些编辑，并在以下位置提供了一个工作示例：。我确实先编辑了另一个映射，所以我从未检查过项目映射是否正确，但我相信您能够解决该步骤（项目的代码已在fiddle链接中更改）

希望有帮助

---

/罗伯特

我确实回答了你的问题

你的假设是正确的。问题似乎主要在于您的映射。您甚至从未调用PaycheckBudget类的构造函数。例如，您的BudgetListViewModel构造函数如下所示：

var BudgetListViewModel = function(data) {
    var self = this;
    self.budgets = ko.observableArray(data);
};

但可能应该是这样的：

var BudgetListViewModel = function(data) {
    var self = this;
    self.budgets = ko.observableArray(ko.utils.arrayMap(data, function(item){
        return new PaycheckBudget(item);
    }));
};

我已经对您的JSFIDLE进行了一些编辑，并在以下位置提供了一个工作示例：。我确实先编辑了另一个映射，所以我从未检查过项目映射是否正确，但我相信您能够解决该步骤（项目的代码已在fiddle链接中更改）

希望有帮助

---

/罗伯特

Gah，我走出Jabbr房间去吃午饭，忘了跳回去。谢谢，罗伯特，我吃完这个汉堡后会仔细考虑你的建议嘎，我走出Jabbr房间去吃午饭，忘了跳回去。谢谢，罗伯特，我吃完这个汉堡后会仔细考虑你的建议