3 Boxes and Container

Enable a box based on the other three boxes

by db_dev

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul data-bind="foreach: planets, visible: $data.planets().length > 0">
    <li data-bind="if: showConfig">
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
    
</ul>

SCSS

.config {
    border: dashed 1px #b5ace5;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 5px;
    &:last-child {
        margin: 0;
    }
}

.outer {
    border: dashed 2px #b5ace5;
    padding: 10px;
    background-color: #cdc6ef;
    border-radius: 5px;
    margin-top: 16px;
}

JavaScript

function viewModel() {
    var self = this;

        self.planets = ko.observable( [
            { showConfig: null, name: 'Mercury', capital: null }, 
            { showConfig: null, name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]);
    

}

var goodViewModel = new viewModel();
ko.applyBindings(goodViewModel);