Knockout - readonly model binding from selected item in dropdown

http://stackoverflow.com/questions/9769955/knockout-readonly-model-binding-from-selected-item-in-dropdown

by corinnekm

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<!--<ul class="thumbnails" data-bind="foreach: SearchResponse.Image.Results">
    <li class="span2"><img data-bind="attr: {src: Thumbnail.Url}" /></li>
</ul>-->


<div id="menu-main-container">
    <ul id="menu-main" data-bind="foreach: Menu.Items">
        <li class="selected" id="menu-item-home"><a data-bind="text:link">
            
            <span data-bind="text:caption"/>
        </a>
        </li>
    </ul>
</div>

JavaScript

var viewModel;
function bindModel(data) {
    viewModel = ko.mapping.fromJS(data);
    console.log(viewModel);
    ko.applyBindings(viewModel);
}

var menuData = {
    Menu: {       
        Items: [{caption: "Home", link : "goToHome", selected :"true"}, {caption: "Support", link : "goToSupport",  selected : "false"}]        
    }
};
var ajaxData = {
    SearchResponse: {
        Image: {
            Results: [{
                Thumbnail: {
                    Url: "http://lolcat.com/images/lolcats/1338.jpg"
                }}
            ]
        }
    }
};
bindModel(menuData);