MVC 3 应用程序中的基本 javascript 和 knockout.js：for in 循环遍历 myCustomObject 项目数组时出现问题

Question

问题：

我尝试将 knockout.js 与 jquery 模板一起使用。问题是 $.ajax 调用正确返回值，但是当我尝试将它们插入相应的 ko.observableArray 时，我得到了正确的行数，但值都是 根据我的调试

，问题位于 $.ajax 调用的成功回调中的 for in 循环中。

似乎如果我写：

for (item in myArray)
{
    alert(item.myProperty); // shows undefined
}

我做错了什么？？！

详细设置如下。

设置：

我的模板是：

<fieldset style="padding-top:10px;">
    <legend>Associated Cost Centres</legend>
    <table>
        <thead>
            <tr>
                <th>
                    Cost Centre
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="template: {name:'actividadesAsociadas', foreach: viewModel.costCentres}"></tbody>
    </table>
</fieldset>
<script type="text/x-jquery-tmpl" id="actividadesAsociadas">
    <tr>
        <td data-bind="text: NameCC"></td>
        <td data-bind="text: CostCentreId"></td>
        <td><a href="#" data-bind="click: remove">Delete</a></td>
    </tr>
</script>

我的 javascript 是：

function costCentre(CostCentreId, IdTransactionType, NameCC, ownerViewModel) {

    this.CostCentreId      = ko.observable(CostCentreId); 
    this.IdTransactionType = ko.observable(IdTransactionType); 
    this.NameCC            = ko.observable(NameCC);
    this.remove            = function() { ownerViewModel.costCentres.destroy(this) }
} 



function costCentreViewModel() { 

   // other methods

   this.costCentres = ko.observableArray([]);

    var self = this;self = this;
    $.ajax({url: "/[...route...]/GetCostCentres/" + @id,
        dataType: 'json',
        data: {},
        type: 'POST',
        success: function (jsonResult) {
            var mappedCostCentres = $.map(jsonResult, function(item) {
            return new costCentre(item.CostCentreId, item.IdTransactionType, item.Name, self)
             });
             for (cc in mappedCostCentres)
             {
                 self.costCentres.push(new costCentre(cc.CostCentreId, cc.IdTransactionType, cc.NameCC, self));
             }
       },
       error: function (result) {
             $('#ErrorDisplay').show().html('<p>' + result.responseText + '</p>');
       }
    });
    // test data
    this.costCentres.push(new costCentre(55, 54, "test", this));

    // other methods
}; 

var viewModel = new costCentreViewModel();
jQuery(document).ready(function () { ko.applyBindings(viewModel); });

javascript 代码中出现问题的部分是：

for (cc in mappedCostCentres)
{
    self.costCentres.push(new costCentre(cc.CostCentreId, cc.IdTransactionType, cc.NameCC, self));
}

原因是 cc.CostCentreId、cc.IdTransactionType 和 cc.NameCC 的计算结果全部为 undefined。

我知道是这种情况，因为测试数据由 jquery.tmpl 模板正确显示，而 $.ajax 调用引入的行仅显示为空标签。

jsonResult：

$.ajax 调用返回的 jsonResult 看起来像这样（这是正确的）：

    [{"CostCentreId":5,"IdTransactionType":2,"Name":"Impuestos"},
{"CostCentreId":14,"IdTransactionType":3,"Name":"Transferencias Internas"}]

问题：

1. 设置了我的 for in 循环 (for(cc inmappedCostCentres))，为什么会这样：

cc.NameCC

评估为 undefined，尽管能够在 firebug 中看到mappedCostCentres 中的项目具有我期望的值？

1. 有什么更好的，或者更确切地说，有什么工作方法可以从另一个数组填充一个数组？

编辑：

我现在正在尝试以下代码：

在我的 ViewModel (costCentreViewModel) 中，我定义：

this.GetCostCentres = function() {
    $.ajax({url: "/Admin/Accounts/GetCostCentres/" + @id,
            dataType: 'json',
            data: {},
            type: 'POST',
            success: function (jsonResult) {
                var mapped = $.map(jsonResult, function(item) {
                    return new costCentre(item.CostCentreId, item.IdTransactionType, item.Name, self)
                });
                self.costCentres = ko.observableArray(mapped);
                alert(self.costCentres.length);
            },
            error: function (result) {
                $('#ErrorDisplay').show().html('<p>' + result.responseText + '</p>');
        }
    });
};

然后我调用（从视图模型定义外部）：

var viewModel = new costCentreViewModel();
viewModel.GetCostCentres();
jQuery(document).ready(function () { ko.applyBindings(viewModel); });

它仍然不起作用。我心中的问题是：

为什么这条线不起作用（其他一切都起作用）：

self.costCentres = ko.observableArray(mapped);

我只能认为这是我使用构造函数模式定义视图模型对象的方式，即：

function myViewModel() {
this.costCentres= ko.observableArray([]);

...

this.GetCostCentres = function() {
   $.ajax(....);

}

但老实说我没有任何线索。 JavaScript 现在正在打败我。也许我应该回到量子宇宙学？

Answer 1

看起来主要问题是，当尝试根据 AJAX 请求的结果设置 observableArray 的值时，您将其设置为等于新的 observableArray，而不是设置已绑定到 UI 的现有 observableArray 的值。

因此， self.CostCentres = ko.observableArray(mapped)` 将创建一个新的 observableArray，您的 UI 当前未绑定该数组。

self.CostCentres(mapped) 是将现有 observableArray 设置为等于全新数组的适当方法。

在之前的尝试中，看起来您确实构建了两次 CostCentre 以将其推送到您的 observableArray 上。每个 CostCentre 只需创建一次。

Answer 2

该问题主要是由于：

1. 我缺乏 javascript 知识。

2. 复制knockoutjs.com教程以使用knocking加载和保存数据，但没有意识到教程框架缺少任何js代码行来调用viewmodel对象。

因此，当它不起作用时，我就开始了一些转移注意力的活动，这只会让我在泥沼中越陷越深。

尼迈耶在问题下面的评论帮助我回到正轨。但是对于任何与我一样对 javascript 无知程度相似的人，您可以复制或改编 knockoutjs.com 上的教程代码，只需记住在底​​部添加等效项（即，取决于您的代码的作用）：

var viewModel = new costCentreViewModel();
viewModel.GetCostCentres();
jQuery(document).ready(function () { ko.applyBindings(viewModel); });

这有效地运行您的代码，而不是发生奇怪的事情，我没有能力描述或分析...

请注意，

我添加了这个答案，以防有人遇到与我相同的问题，并强调什么是有效的，如下RP Niemeyer 的建议和让事情发挥作用。

如果 RP Niemeyer 添加了一个答案，总结了他的建议，我将删除该答案并将其标记为解决方案。