我在从Knockout.js模型函数之一发送AJAX调用时面临问题。
这对我来说似乎很奇怪。我的Knockout脚本看起来像
<script type="text/javascript">
var userinfoViewModel = function () {
var self = this;
self.ID = ko.observable("0");
self.First_Name = ko.observable("");
self.Last_Name = ko.observable("");
self.Login_Id = Ko.observable("");
self.Password = ko.observable("");
self.Role = ko.observable("");
var user = {
ID: self.ID,
First_Name: self.First_Name,
Last_Name: self.Last_Name,
Login_Id: self.Login_Id,
Password: self.Password,
Role: self.Role
};
//Declare an ObservableArray for Storing the JSON Response
self.Users = ko.observableArray([]);
//Function to Read All Users
function GetUsers() {
//Ajax Call Get All Employee Records
$.ajax({
type: "GET",
url: "/api/user",
contentType: "application/json",
dataType: "json",
success: function (data) {
self.Users(data); //Put the response in ObservableArray
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
//call GetUsers Ajax call.
GetUsers();
//CRUD Operations
//Function to perform POST (insert User) operation
self.Create = function () {
//Ajax call to Insert the User
$.ajax({
type: "POST",
url: "/api/user",
data: ko.toJSON(User), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert("Record Added Successfully");
self.EmpNo(data.EmpNo);
alert("The New Employee Id :" + self.EmpNo());
GetEmployees();
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
self.update = function () {
var url = "/api/user/" + self.EmpNo();
alert(url);
$.ajax({
type: "PUT",
url: url,
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("Record Updated Successfully");
GetEmployees();
},
error: function (error) {
alert(error.status + "<!----!>" + error.statusText);
}
});
};
//Function to perform DELETE Operation
self.deleterec = function (user) {
$.ajax({
type: "DELETE",
url: "/api/EmployeeInfoAPI/" + employee.EmpNo,
success: function (data) {
alert("Record Deleted Successfully");
GetUser();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
// alert("Clicked" + employee.EmpNo)
};
//Function to Display record to be updated
self.getselecteduser = function (user) {
self.ID(user.ID),
self.First_Name(user.First_Name),
self.Last_Name(user.Last_Name),
self.Login_Id(user.Login_Id),
self.Password(user.Password),
self.Role(user.Role)
};
};
ko.applyBindings(new userinfoViewModel());
</script>
}
和我在页面中使用的底层HTML看起来像-
<form>
<table>
<tr>
<td>
<!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->
<table id="tbldml">
<tr>
<td>ID</td>
<td>
<input type="text" id="ID" data-bind="value: $root.ID" /></td>
</tr>
<tr>
<td>First_Name</td>
<td>
<input type="text" id="First_Name" data-bind="value: $root.First_Name" /></td>
</tr>
<tr>
<td>Last_Name</td>
<td>
<input type="text" id="Last_Name" data-bind="value: $root.Last_Name" /></td>
</tr>
<tr>
<td>Login_Id</td>
<td>
<input type="text" id="Login_Id" data-bind="value: $root.Login_Id" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="text" id="Password" data-bind="value: $root.Password" />
</td>
</tr>
<tr>
<td>Role</td>
<td>
<input type="text" id="Role" data-bind="value: $root.Role" />
</td>
</tr>
<tr>
<!--The click binding has the JavaScirpt methods passed to it-->
<td>
<button data-bind="click :$root.save">Save</button></td>
<td>
<button data-bind="click: $root.update">Update</button></td>
</tr>
</table>
</td>
<td>
<div class="FixedContainer">
<!--If the lenght of the Users is greater than 0 then visible the Table-->
<table data-bind="visible: Users().length>0">
<thead>
<tr>
<td>ID</td>
<td>First_Name</td>
<td>Last_Name</td>
<td>Login_Id</td>
<td>Role</td>
<td></td>
</tr>
</thead>
<!--Iterate through an observableArray using foreach-->
<tbody data-bind="foreach: Users">
<tr data-bind="click: $root.getselecteduser" id="updtr">
<td><span data-bind="text: ID"></span></td>
<td><span data-bind="text: First_Name"></span></td>
<td><span data-bind="text: Last_Name"></span></td>
<td><span data-bind="text: Login_Id"></span></td>
<td><span data-bind="text: Role"></span></td>
<td>
<button data-bind="click: $root.deleterec">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
</section>
这个问题看起来很奇怪，我猜，绑定是非常合适的。我的API调用URL类似于- Http://localhost:1234/api/user
Fiddler track:我尝试通过Fiddler捕获调用，但似乎是一个未知的GetUsers()调用从脚本不被解雇在第一。不能发现问题，帮助将不胜感激。
第一个可见错误:
self.Login_Id = Ko.observable(""); // must be 'ko'
您正在定义您的KO模型，但没有应用它。
你需要打电话给ko。applyBindings(新userinfoViewModel ());
你不应该在你的模型中定义你的单实例用户类。
你现在正在做的是在你的模型中定义一个self对象，带有单个用户的属性。然后你实际上是把一个新的user对象指向self对象，其中user现在有它自己的引用，引用的属性与self相同。
然后你在你的模型中定义另一个对象，它是一个数组，将容纳多个用户。
将整个用户类定义从模型中取出。它应该是这样的，而不是嵌套在模型中:
function User(data){
self = this;
self.ID = ko.observable(data.ID);
self.First_Name = ko.observable(data.First_Name);
self.Last_Name = ko.observable(data.Last_Name);
self.Login_Id = Ko.observable(data.Login_Id);
self.Password = ko.observable(data.Password);
self.Role = ko.observable(data.Role);
}
然后你有你的模型:
var userinfoViewModel = function () {
var self = this;
//Declare an ObservableArray for Storing the JSON Response
self.Users = ko.observableArray([]);
...
in your CREATE function loop through the AJAX response:
for(user in ajaxData){
var newUser = new User(user);
}
//then push it onto the Users array
self.Users.push(newUser);
...
other CRUD functions
...
}