Saturday, May 11, 2024
 Popular · Latest · Hot · Upcoming
67
rated 0 times [  70] [ 3]  / answers: 1 / hits: 15193  / 8 Years ago, wed, august 3, 2016, 12:00:00

i am using the knockout js, i am finding diffcult to bind the data while in ajax get method, i have created model, viewModel, and ajax function, i have the ajax method in the same js file where i have created viewModel i am calling the ajax on page load and trying to bind my html with konckout js, i am getting the error userModel is undefined if i give this.name = ko.observale(result[0].name) before the ajax call, after the ajax called it give name is undefined need help



<html>
<head>
<script src=js/jquery1.9.js></script>
<script src=js/knockout-3.3.0.js></script>
<script src=js/knockout.mapping.js></script>
<script src=model/usermodel.js></script>
</head>

<body>

<div>
<h1><span data-bind=text:user().name></span></h1>
<h1><span data-bind=text:user().userName></span></h1>
</div>
<script src=ViewModel/userDetailsViewModel.js></script>
</body>
</html>




////Model////
function userModel(result) {
var self = this;
this.name = ko.observable(result[0].name); /// give me error undefined before the ajax call and after ajax call i get the value in result
this.userName = ko.observable();

}

/////View Model////
var result
var userDetailsViewModel = function(result) {
self = this;
self.user = ko.observable(new userModel(result));
};
var mainUserDetailsViewModel = new userDetailsViewModel(result);
ko.applyBindings(mainUserDetailsViewModel);

////ajax called on the page load ////
$.ajax({
type: POST,
dataType: json,
url: baseUrl + 'api/xx/xxx',
data: jason.strigfy(),
success: function(data) {
result = data;
////I am getting in result json data object 0=[name:nnnn,Username:mmmmmm],
//// i am passing this result to ViewModel and to Usermodel Constructor//
mainUserDetailsViewModel.user(new userModel(result));

},
error: function(error) {
jsonValue = jQuery.parseJSON(error.responseText);
//jError('An error has occurred while saving the new part source: ' + jsonValue, { TimeShown: 3000 });
}
});

More From » jquery

 Answers
6

Here is my suggestion to have a clean nested view model.

Example : https://jsfiddle.net/kyr6w2x3/28/



function UserViewModel() {
var self = this;
self.UsersList = ko.observableArray([]);

self.GetUsers = function() {
$.ajax({
type: POST,
dataType: json,
url: baseUrl + 'api/xx/xxx',
data: jason.strigfy(),
success: function (data) {
//Here you map and create a new instance of userDetailVM
self.UsersList($.map(data, function (user) {
return new UserDetailViewModel(user);
}));
}
});
}
//call to get users list when the VM is loading or you can call it on any event on your model
self.GetUsers();
}
function UserDetailViewModel(data){
var self = this;
self.Name = ko.observable(data.name);
self.UserName = ko.observable(data.username);
}

ko.applyBindings(new UserViewModel());


View :



 <h1 data-bind=foreach: UsersList>
<div data-bind=text: Name></div>
<div data-bind=text: UserName></div>
</h1>

[#61161] Monday, August 1, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
emiliano

Total Points: 381
Total Questions: 109
Total Answers: 93

Location: Jersey
Member since Fri, Oct 1, 2021
3 Years ago
emiliano questions
;