Binding viewmodel with knockoutjs mapping

Question

I've just decided to learn knockoutjs, and I'm having a bit of an issue binding some json to my viewmodel. I've searched heaps on it, tried heaps of things, but I must have missed something.

Javascript:

    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };

    var viewModel = {};
    ko.mapping.fromJSON(data, viewModel);

    ko.applyBindings(viewModel);

HTML

TestText: <span data-bind="text: TestText"></span><br>
TestList: <select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>

EDIT

the variable 'data' was used as an example of the json I get back from the server. Anyways, I've updated the above code with getJSON and getting an error which the above example really can't give me as it doesn't use getJSON.

Updated JAVASCRIPT:

var viewModel;
$.getJSON('/myurl',
    function (data) {
        viewModel = data;
    });

alert(viewModel);

$(function() {
    ko.applyBindings(viewModel);
});

The issue i'm having here is that it works.. as long as the alert box is there. If i comment that line out, it doesn't work!

Answer 1

Your first issue is that you are declaring data as an array with only one member in it, but you are not referring to this array within your data-bind declarations.

Secondly if you have data as a JavaScript object you do not need fromJSON on it.

Updated JS Code:

var data = {
    "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
    "TestText": "Hello World"
};

var viewModel = data;//{};

ko.applyBindings(viewModel);

Working fiddle: http://jsfiddle.net/AfgAG/19/

EDIT: Updated answer to reflect the updates in the question and also the initial answer.\

Your view model needs to have the options list as an observable array for the options binding to work.

Also, it is better to start off your view model with structure defined and the observables defined for the data binding to work when you update with your AJAX call.

See below for updated javascript code. Could not create a fiddle as I was unable to access the fiddle side.

var viewModel = 
    {
        TestText: ko.observable('My Initial Text'),
        TestList: ko.observableArray([])
    }

ko.applyBindings(viewModel);

// using set time out here to simulate your ajax call.
setTimeout(function () {
    // this would normally be the content for your getJson success method. 
    // this is where you use your from JSON. 
    // data is a javascript object from ajax response. 
    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };
    // update the view model observable properties.
    viewModel.TestText(data.TestText);
    viewModel.TestList(data.TestList);
}, 2000);

Answer 2

I've figured it out. FYI, This is what i did:

javascript

    var viewModel = (function () {
        var self = this;
        this.model = ko.observableArray([]);

        $.getJSON('/myurl',
            function (data) {
                self.model = ko.mapping.fromJS(data, self.model);
                ko.applyBindings(self.model);
            });
    });

    ko.applyBindings(new viewModel());

html

<span data-bind="text: TestText"></span>
<select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>