Knockout 3.2 Components Example.

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<select
    data-bind="
        options: availableCountries,
        value: selectedCountry,
        optionsText: 'countryName',
        optionsCaption: ' '"
>
</select>

<p>Ok: <span data-bind="text: selectedCountry().countryName"></span></p>
<p>Ok: <span data-bind="text: selectedCountry().ids().length"></span></p>
<div data-bind="foreach: selectedCountry().ids">
    <p>Ok: <span data-bind="text: $data"></span></p>
</div>
---------
<div data-bind="container: { data: selectedCountry }">
    <p>Ok: <span data-bind="text: $container.data().countryName"></span></p>
    <p>Ok: <span data-bind="text: $container.data().ids().length"></span></p>
    <div data-bind="foreach: $container.data().ids">
        <p>Ok: <span data-bind="text: $data"></span></p>
    </div>
</div>
---------
<div data-bind="with: selectedCountry">
    <div data-bind="container: { data: ids }">
        <p>Ok: <span data-bind="text: $container.data().length"></span></p>
        <div data-bind="foreach: $container.data">
            <p>Ok: <span data-bind="text: $data"></span></p>
        </div>
    </div>
</div>
---------
<div data-bind="container: { data: selectedCountry().ids }">
    <p>Error: <span data-bind="text: $container.data().length"></span></p>
    <div data-bind="foreach: $container.data">
        <p>Error: <span data-bind="text: $data"></span></p>
    </div>
</div>

JavaScript

ko.bindingHandlers.container = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var innerBindingContext = bindingContext.extend({
            $container: ko.utils.unwrapObservable(valueAccessor())
        });
        
        ko.applyBindingsToDescendants(innerBindingContext, element);
        
        return { controlsDescendantBindings: true };
    }
};

var Country = function(name, ids) {
    this.countryName = ko.observable(name);
    this.ids = ko.observableArray(ids);
};

var viewModel = {
    availableCountries : ko.observableArray([
        new Country("UK", [1, 2, 3]),
        new Country("USA", [10, 20, 30, 40]),
        new Country("Sweden", [100, 200, 300, 400, 500])
    ]),
    selectedCountry : ko.observable()
};

viewModel.selectedCountry(viewModel.availableCountries()[1]);

ko.applyBindings(viewModel);