javascript 未捕获的 ReferenceError：无法处理与 Ajax 的绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24981098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught ReferenceError: Unable to process binding with Ajax
提问by Valermus
I have two layered MVC4 .NET Application with DAL and Web layers. I am having problems when trying to bind data with Ajax returned data.
我有两个分层的 MVC4 .NET 应用程序，带有 DAL 和 Web 层。尝试将数据与 Ajax 返回的数据绑定时遇到问题。
On Html, i am trying to get SubcriteriaList members and create the table for each member while filling their values.
在 Html 上，我试图获取 SubcriteriaList 成员并在填充它们的值时为每个成员创建表。
HTML:
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>
Knockout JS ViewModel in different JavaScript file.
在不同的 JavaScript 文件中敲除 JS ViewModel。
JavaScript File:
JavaScript 文件：
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);
When alert(data)hits i can see; [object Object],[object Object],[object Object]return succesfuly however i can not add this JsonResult to SubCriteriaList array.
当alert(data)点击时我可以看到；[object Object],[object Object],[object Object]成功返回但是我无法将此 JsonResult 添加到 SubCriteriaList 数组。
Thus (i think) i am getting
因此（我认为）我得到
*Uncaught ReferenceError: Unable to process binding "value: function(){return Code }" Message: Code is not defined*
error.
错误。
How can i fill this SubcriteriaList array with this Ajax usage?
我怎样才能用这个 Ajax 用法填充这个 SubcriteriaList 数组？
Thanks in advance.
提前致谢。
采纳答案by xdumaine
Your data binding is Code, but your observable is code. Variable names are case sensitive. You'll need to fix all of them that do not match, as once you fix this one, the others will fail.
您的数据绑定是Code，但您的可观察对象是code。变量名区分大小写。你需要修复所有不匹配的，因为一旦你修复了这个，其他的就会失败。
You've got some other issues though. You're not actually mapping the response to your view model. You should probably have a parent and child viewModel. The child would have the properties, and would be the map for the ajax response. The child would maintain the list, do the ajax request, etc.
不过你还有一些其他问题。您实际上并未将响应映射到您的视图模型。您可能应该有一个父视图模型和子视图模型。孩子将拥有属性，并将成为 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);
Then, remember to fix all of the casing issues. Here's just one:
然后，请记住修复所有外壳问题。这里只有一个：
<input class="input-large" placeholder="Code" data-bind="value:Code" />
should be
应该
<input class="input-large" placeholder="Code" data-bind="value:code" />
