Javascript 未捕获引用错误：无法处理与Ajax的绑定

我有两层MVC4.NET应用程序，其中包括DAL层和Web层。 我在尝试用Ajax返回的数据绑定数据时遇到问题

在Html上，我试图获取SubcriteriaList成员，并在填充其值时为每个成员创建表

HTML:

 <h2 style="text-align:center">Criteria Info</h2>
<table align="center">
    <tr>
        <th colspan="3">Subcriteria Info</th>
    </tr>
    <tr>
        <td>
            <table class="table-condensed">
                <tbody data-bind="foreach:SubcriteriaList">
                    <tr>
                        <td>
                            <table class="table-condensed">
                                <tr>
                                    <th colspan="5" width="100%;">
                                        <select style="width:100%;"></select>
                                    </th>
                                    <td>
                                        <a class="btn btn-small btn-danger" href="#" style="margin-bottom:10px">X</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Code</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Code" data-bind="value:Code" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Weight</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Weight" data-bind="value:Weight" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Name</label>
                                    </td>
                                    <th colspan="4" width="100%;">
                                        <input style="width:100%;" class="input-large" placeholder="Name" data-bind="value:Name" />
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Goal</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Goal" data-bind="value:Goal" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Achieved</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Achieved" data-bind="value:Achieved" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr style="text-align:right">
        <td>
            <p>
                <button class="btn btn-small btn-primary">Add Criteria</button>
            </p>
        </td>
    </tr>
</table>

function SubCriteriaViewModel() {
    var self = this;

    self.id = ko.observable("");
    self.code = ko.observable("");
    self.name = ko.observable("");
    self.weight = ko.observable("");
    self.goal = ko.observable("");
    self.achieved = ko.observable("");
    self.isActive = ko.observable("");

    var Subcriteria = {
        Id: self.id,
        Code: self.code,
        Name: self.name,
        Weight: self.weight,
        Goal: self.goal,
        Achieved: self.achieved,
        IsActive: self.isActive
    };

    self.Subcriteria = ko.observable();
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            alert(data);
            //Probably Problem is here
            self.SubcriteriaList(data); //Putting the response in ObservableArray
            alert(SubcriteriaList);
            alert(Subcriteria);
        }
    });
}
var viewModel = new SubCriteriaViewModel();
ko.applyBindings(viewModel);

当

警报（数据）

点击时，我可以看到<代码>[对象对象]，[对象对象对象]，[对象对象对象] 成功返回，但我无法将此JsonResult添加到SubCriteriaList数组

因此（我认为）我得到了

*Uncaught ReferenceError: Unable to process binding "value: function(){return Code }" Message: Code is not defined*

错误

如何用这种Ajax用法填充此子标准列表数组

---

提前感谢。

您的数据绑定是

code

，但您可以观察到的是

code

。变量名区分大小写。您需要修复所有不匹配的问题，因为一旦修复了这个问题，其他问题就会失败

不过你还有其他问题。实际上，您并没有将响应映射到视图模型。您可能应该有一个父视图模型和子视图模型。子级将具有这些属性，并且是ajax响应的映射。孩子将维护列表，执行ajax请求，等等

function SubCriteriaViewModel(data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.code = ko.observable(data.code);
    self.name = ko.observable(data.name);
    self.weight = ko.observable(data.weight);
    self.goal = ko.observable(data.goal);
    self.achieved = ko.observable(data.achieved);
    self.isActive = ko.observable(data.isActive);        
}

function ViewModel() {
    var self = this;
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            var subcriteriaList = data.map(function (item) { return new SubCriteriaViewModel(item); });
            self.SubcriteriaList(subcriteriaList); //Putting the response in ObservableArray
        }
    });
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

然后，记住修复所有外壳问题。这里只有一个：

<input class="input-large" placeholder="Code" data-bind="value:Code" />

应该是

<input class="input-large" placeholder="Code" data-bind="value:code" />

而不是使用

警报（数据）

使用

控制台。日志（数据）

可能会更有帮助。谢谢您的提示。我得到了正确的数组和正确的数据，这是没有问题的。进程绑定错误仍在继续，我仍然无法找出原因。我不知道变量区分大小写。这解决了问题，谢谢。