knockout.js, asp.net mvc4 - update simpel viewmodel with getJSON data - jquery-mobile

Question

This is a newbie question and not to mention I am very new to knockout.js. All I am trying to do is, get details of a single Grower (Name, Company, Address) from the server and display it on the webpage. I am using $(document).bind('pageinit', function () since I'm using jQuery mobile.
Now my code is:
<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>
<script type="text/javascript">
$(document).bind('pageinit', function () {
function MyGrowerModel() {
//this.Name = "My Name";
//this.Company = "My Company";
//this.Address = "My Address";
//Load initial state from server, convert it to Task instances, then opulate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
this.Name = allData.Name;
this.Company = allData.Company;
this.Address = allData.Address;
alert(allData.Name); //works!
});
}
ko.applyBindings(new MyGrowerModel());
});
</script>
I am getting "Unable to parse bindings. Message: ReferenceError: Name is not defined; Binding value: Name
It makes sense because Name, Company and Address are scoped inside the getJSON function. So, my question is, where to declare those variables and how to update those ViewModel data?
I do not want to use the mapping plugin.
Any help is appreciated.

Answer 1

You're going to want to be using observable properties. That way, once your $.getJSON request finishes, your view will update with the new data.
<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>
<script type="text/javascript">
function MyGrowerModel() {
var self = this;
self.Name = ko.observable('');
self.Company = ko.observable('');
self.Address = ko.observable('');
self.Name.subscribe(function(newValue) {
alert("Name has changed: " + newValue);
});
//Load initial state from server and populate viewmodel
$.getJSON("Grower/GetGrower", function (allData) {
self.Name(allData.Name);
self.Company(allData.Company);
self.Address(allData.Address);
});
}
$(document).bind('pageinit', function () {
ko.applyBindings(new MyGrowerModel());
});
</script>

Answer 2

You need to preserve a reference to the object:
function MyGrowerModel() {
var self = this;
//Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
self.Name = allData.Name;
self.Company = allData.Company;
self.Address = allData.Address;
});
}
That won't be the only problem though. $.getJSON is asynchronous by default, you'll either want to set async: false or change the callback function to apply the bindings. A better solution would be to use observables:
function MyGrowerModel() {
var self = this;
self.Name = ko.observable(''); // Value shown before getJSON returns
self.Company = ko.observable('');
self.Address = ko.observable('');
//Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("Grower/GetGrower", function (allData) {
self.Name(allData.Name);
self.Company(allData.Company);
self.Address(allData.Address);
});
}
This will initially display empty strings for each of Name, Company, and Address and will automatically update to the data returned from the getJSON call.