Knockout binding from a JSON data string - html

Question

I'm currently using Knockout to render my HTML page, but I'm stuck when I'm trying to render my HTML when the data is stored in a simple JSON file.
The Json file is here:
{
"name": "Office Web Controls 2014"
}
Here's the function to load my Json string:
<script type="text/javascript">
function AppViewModel() {
this.data = { };
$.getJSON("Resources/Data/Ribbon.json", function(retrievedData) {
this.data = ko.mapping.fromJSON(retrievedData);
console.log(this.data);
});
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
And I would like to bind it to the following HTML:
<div data-bind="text: data.name">
</div>
I've tried very different things but none are working, so if anybody has an idea on how to accomplish this.

Answer 1

Finally, after a long search, I've managed to find the solution.
For anyone who's intrested, here it is:
<div data-bind="template: {name: 'OfficeWebControls-Title', data: ribbonViewModel}">
</div>
And finally the script:
<script type="text/javascript">
var ribbonViewModel;
$.getJSON("Resources/Data/Ribbon.json", function(data) {
ribbonViewModel = ko.mapping.fromJS(data);
ko.applyBindings(ribbonViewModel);
});
</script>

Answer 2

The reason it wasn't working is two fold:
The this pointer in the call back function is not pointing to your vm
Resources:
jQuery/JavaScript "this" pointer confusion
How does the "this" keyword work?
The data property of your vm needs to be converted to an observable
The $.getJSON call will execute asynchronously and the response will be handled after the ko.applyBindings call. This means that you'll be changing the value of the data property after it's bound to the UI. For the UI to receive changes after it is bound the properties on the view model will need to be wrapped in observables.
Example
function AppViewModel() {
//remember the this pointer for the call back handler
var self = this;
//set default data to an observable
self.data = ko.observable(null);
$.getJSON("Resources/Data/Ribbon.json", function(retrievedData) {
//use self to reference properties on the vm in a call back handler
self.data(retrievedData);
console.log(self.data());
});
}
ko.applyBindings(new AppViewModel());
For this to work the view will also need to change.
<!-- ko if:data -->
<div data-bind="text: data().name"></div>
<!-- /ko -->
fiddle