Knockout mapping not giving me access to properties

Question

For demo purposes, I'm writing a project tracking app. Projects have tasks, people, etc and each have associated properties like title and description.

I created a select list and expected it to be populated with the title properties of each project. Instead, it's being populated with the text of a function. I assume it's because title is an observable. But I don't know how I can ask for the value...

Here is the HTML that isn't populating correctly:

<select data-bind="options: projects, 
    optionsText: 'title', 
    optionsValue: 'id', 
    value: selectedList.id()">
</select>

Here is the javascript with the json included (it's injected using JSON.Net in ASP.Net MVC). The format should be the same, although I tried to sanitize it, so please excuse any missing brackets.

<script type="text/javascript">
    var initialData = [
    {
        "id": "2150980c-1033-4b20-a58b-9e5400abb651",
        "title": "project1",
        "description": "project 1 description",
        "persons": [
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "firstname": "p1_fname"
        },
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "firstname": "p1_fname"
        }],
        "tasks": [
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "title": "task1"
        },
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "title": "task2"
        }]
    },
    {
        "id": "54d4dc7c-0928-4c05-93a2-9e5400abb6a0",
        "title": "project2",
        "description": "project 2 description",
        "persons": [
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "firstname": "p1_fname"
        },
        {
            "id": "1f6f531c-bafa-4fe8-aac8-9e5400abb65a",
            "firstname": "p1_fname"
        }],
        "tasks": []
    }
    ];

    var viewModel = {
        projects: ko.mapping.fromJS(initialData)
    };

    viewModel.selectedList = {
        id: ko.observable("")
    };

    if(viewModel.projects().length > 0)
        viewModel.selectedList.id(viewModel.projects()[0].id());

    ko.applyBindings(viewModel);

</script>

EDIT:

Green was right. The code is fine. I hadn't provided enough information. I was using Knockout 1.1.1 with mapping plugin 0.5. This is what caused the problem. Knockout is currently on v1.1.2. When I upgraded to 1.1.2, it worked. Good catch green. I should have checked it in fiddle first.

Note: It doesn't look like there is currently any documentation indicating the requirement to use 1.1.2.

Answer 1

I don't see the problem with the code. The fiddle shows the selection is correctly populated with project title: http://jsfiddle.net/greenlaw110/Tkqqb/3/