asked on
Accessing observable variable before and after setting a value is not working
I have 2 variables declared as mtn and atn whose values get populated based on the API ajax response.
Now, I am assigning mtn and atn variables with a value returned from API response and in my case since mtn is coming as null whereas atn is having a 10 digit number. So I am assigning atn1, atn2, atn3 with substring of atn whereas mtn1, mtn2 and mtn3 is untouched as you can see from below code snippet.
I believe the reason for the method of accessing atn1 as ViewModel.atn1 is working whereas method of accessing mtn1 as ViewModel.mtn1 is not working is because of re-assignment of observable for atn1 whereas mtn1 is not touched.
So how do I know which method of access to invoke an observable value since I don't know if my observables were touched or not ? :(
Now, I am assigning mtn and atn variables with a value returned from API response and in my case since mtn is coming as null whereas atn is having a 10 digit number. So I am assigning atn1, atn2, atn3 with substring of atn whereas mtn1, mtn2 and mtn3 is untouched as you can see from below code snippet.
var ViewModel = {
mtn: null,
atn: null,
mtn1: ko.observable(null),
mtn2: ko.observable(null),
mtn3: ko.observable(null),
atn1: ko.observable(null),
atn2: ko.observable(null),
atn3: ko.observable(null)
}
// Ajax API call happens and assigns ViewModel.mtn and ViewModel.atn
if (ViewModel.mtn != null && ViewModel.mtn.length == 10) { //This condition is not true because ViewModel.mtn is coming as null in case and so mtn1, mtn2 and mtn3 observables are untouched
ViewModel.mtn1 = ViewModel.mtn.substring(0, 3);
ViewModel.mtn2 = ViewModel.mtn.substring(3, 6);
ViewModel.mtn3 = ViewModel.mtn.substring(6, 10);
}
if (ViewModel.atn != null && ViewModel.atn.length == 10) {
ViewModel.atn1 = ViewModel.atn.substring(0, 3);
ViewModel.atn2 = ViewModel.atn.substring(3, 6);
ViewModel.atn3 = ViewModel.atn.substring(6, 10);
}
ko.applyBindings(ViewModel);
// Click event happens from View and Business logic UI validations take place below
processClick: function() {
.var strmtn = ViewModel.mtn1 + ViewModel.mtn2 + ViewModel.mtn3; // This is not working and throwing error and only ViewModel.mtn1() is working
var stratn = ViewModel.atn1 + ViewModel.atn2 + ViewModel.atn3; // This is working fine but ViewModel.atn1() is not working.
I believe the reason for the method of accessing atn1 as ViewModel.atn1 is working whereas method of accessing mtn1 as ViewModel.mtn1 is not working is because of re-assignment of observable for atn1 whereas mtn1 is not touched.
So how do I know which method of access to invoke an observable value since I don't know if my observables were touched or not ? :(
Web FrameworksJavaScript
Last Comment
gopikrish
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
btw, when the AJAX call is your problem then it depends on your returned data by this call. When it for example return { "mtn": "1234567890", "atn": "abcdefghij" }, then you can use e.g jQuery.
in
$.getJSON("/some/url", function(data) {
ViewModelContainer.mtn(data.mtn);
})
in
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.1.min.js"></script>
<script src="knockout-3.4.0.js"></script>
<script>
$( document ).ready(function() {
ViewModelContainer = new ViewModel();
ko.applyBindings(ViewModelContainer);
$.getJSON("/some/url", function(data) {
ViewModelContainer.mtn(data.mtn);
})
.done(function() {
console.log("success: got data from AJAX.");
console.log(ko.toJSON(data, null, 2));
})
.fail(function() {
console.log("error: AJAX call failed.");
console.log("error: running with simulated data.");
ViewModelContainer.mtn('SIMULATED.');
});
});
</script>
<script>
var ViewModelContainer;
function ViewModel() {
var self = this;
self.mtn = ko.observable(null);
self.mtnIsValid = function() {
return (self.mtn() !== null && self.mtn().length === 10);
}
self.mtn1 = ko.computed(function() {
return (self.mtnIsValid() ? self.mtn().substring(0, 3) : null);
});
self.mtn2 = ko.computed(function() {
return (self.mtnIsValid() ? self.mtn().substring(3, 6) : null);
});
self.mtn3 = ko.computed(function() {
return (self.mtnIsValid() ? self.mtn().substring(6, 10) : null);
});
self.strmtn = ko.computed(function() {
return (self.mtnIsValid() ? self.mtn1() + '-' + self.mtn2() + '-' + self.mtn3(): 'n/a');
});
}
</script>
</head>
<body>
<div data-bind="text: mtn"></div>
<div data-bind="text: mtn1"></div>
<div data-bind="text: mtn2"></div>
<div data-bind="text: mtn3"></div>
<div data-bind="text: strmtn"></div>
</body>
</html>
ASKER
Thanks !
looking the code you posted, it look like you don't run the code starting line 12 after the end of the ajax call. you run it just after doing the ajax call.
you must run this code in the callback of the ajax call