http://stackoverflow.com/questions/43137136/asp-net-mvc-core-knockout-js-multiple-nested-containers-not-binding-properly

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

    
    <div data-bind="foreach: lists" id="thumbnails">     
            <div class="thumbnail-container">
                <span data-bind="text:listname"></span><br /><br /><br /><br /><br />
                <div id="abc">                   
                    <ul class="list-group" data-bind="foreach: cardlists">
                        <li class="list-group-item">
                            <span data-bind="text: cardname"></span>
                            <a href="#" data-bind="click: $root.removecard">Del</a>
                        </li>                  
                    </ul>
                    <a href="#" data-bind="click:  $parent.showhideaddcard">Add Card</a><br />                           
                    <div data-bind="visible: showRenderTimes">
                        <input type="text" data-bind="value: $parent.cardtext" /><br /><br /><br />
                        <input type="button" value="Add" data-bind="click: $parent.addcard" />
                        <input type="button" value="Cancel" data-bind="click: $parent.cancelcard" />
                    </div>   
                </div>             
            </div>
       </div>
    <p>
        <span id="addVar" data-bind="click: addList">Add List</span>
    </p>
    <p class="alignRight">
        <input type="submit" value="Check">
    </p>

CSS

#scroll-wrapper {
    margin: 5px;
    max-height: 250px;
    overflow: auto;
    vertical-align: top;
}

#thumbnails {
    vertical-align: top;
    padding-bottom: 10px;
    max-height: 500px;
    min-width: 100px;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}


.thumbnail-container {
    display: inline-block;
    position: relative;
    line-height: 5px;
    margin: 3px;
    margin-bottom: 15px !important;
}
#abc {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
}

JavaScript

var initialData = [
        { listname: "list1",containername :"container1", cardlists: [ { cardname: "car1111111" }, { cardname: "caddsdf" }] }, { listname: "list2",containername :"container2", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list3", containername: "container3", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list4", containername: "container4", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list5", containername: "container5", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list6", containername: "container6", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list7", containername: "container7", cardlists: [ { cardname: "card 3" }, { cardname: "card 4" }, { cardname: "card 5" }, { cardname: "card 6" }, { cardname: "card 7" }, { cardname: "card 8" }, { cardname: "card 9" }, { cardname: "card 10" }, { cardname: "card 11" }] }, { listname: "list6", containername: "container8", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list6", containername: "container9", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list6", containername: "container10", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] }, { listname: "list6", containername: "container11", cardlists: [ { cardname: "card 1" }, { cardname: "card 2" }] } 
];


    var ListModal = function(lists) {
        var self = this;
        //self.showRenderTimes = ko.observable(false);
        self.cardtext = ko.observable("ff");
        self.lists = ko.observableArray(ko.utils.arrayMap(lists, function (list) {
            return { listname: list.listname, containername:list.containername, cardlists: ko.observableArray(list.cardlists), showRenderTimes: ko.observable(false) };
        }));


        self.addList = function() {
            self.lists.push({
                listname: "abc", 
      ...