Knockout binding from a JSON data string

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>