Knockout mapping for nested Complex Objects

Question

I have a viewmodel with child objects. How do I define the mapping for properties of the child objects?

public class ViewModel
{
    public ManageComparatorSelectionsViewModel ManageComparatorSelectionsViewModel { get; set; }
    public ManageComparatorItemViewModel CurrentComparatorItem { get; set; }
}


public class ManageComparatorSelectionsViewModel
{
    public IList<Edition> Editions { get; set; }
    public IList<Year> Years { get; set; }
}

public class ManageComparatorItemViewModel
{
    public Edition ChosenEdition { get; set; }
    public Year ChosenYear { get; set; }
}

I am doing the following to initialize knockout

    var mapping = {
        'ManageComparatorSelectionsViewModel.Editions': {
            key: function (data) {
                return ko.utils.unwrapObservable(data.Id);
            }
        },
        'ManageComparatorSelectionsViewModel.Years': {
            key: function (data) {
                return ko.utils.unwrapObservable(data.Id);
            }
        }
    };
    var viewModel = ko.mapping.fromJS(viewModelData, mapping);

    ko.applyBindings(viewModel);

Answer 1

is there any reason you need those to be unwrapped? you could always get at those same objects by getting the property() or by doing ko.toJS() item you are looking at.

EDIT:

For the dropdown:

<select data-bind=" template : { 'name' : 'templateID', foreach : optionlist } "></select>

With a template that looks like this:

<script type="html/text" id="templateID">
      <option value="${ key }">${ text }</option>
</script>