KnockoutJS Nested list

Question

i am KnockoutJS newbie.

I have a view written below and can't see categoryVariables for each categories in runtime. Can you have a look and say what is wrong here?

Thanks for your help.

My code view:

<table class="table">
    <thead>
    </thead>
    <tbody data-bind="foreach: categories">
        <tr>
            <td data-bind="text: Name">
                <table>
                    <tbody data-bind="foreach: categoryVariables">
                        <tr>
                            <td data-bind="text: Name"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>

<script type="text/javascript">

    var resumeDataViewModel;

    function Category(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;

        self.categoryVariables = ko.observableArray([
            new CategoryVariable({ID: '1', Name: 'asd'})
        ]);
    }

    function CategoryVariable(data) {
        var self = this;

        self.ID = data.ID;
        self.Name = data.Name;
    }

    function ResumeDataViewModel() {
        var self = this;

        self.categories = ko.observableArray([
            new Category({ID: '1', Name : 'Contact', Category: {ID: '1', Name: 'gfdg'}}),
            new Category({ID: '2', Name : 'Education', Category: {ID: '2', Name: 'asdasd'}})
        ]);

        self.addCategory = function(){
            self.categories.push(new Category({
                Name: "sa d"
            }));
        }

        self.addCategoryVariable = function (category) {
            category.categoryVariables.push(new CategoryVariable({
                Name: 'asd'
            }));
        }
    }

    ko.applyBindings(resumeDataViewModel = new ResumeDataViewModel());
</script>

Looking for your reply. Thanks you so much.

Answer 1

Your issue is with the binding of text: Name and then adding a table to the same td. I have moved the table for categoryVariables to a separate TD and it works fine.

Since you have bound the text of TD, Ko's data binding will overwrite whatever else you have inside of it and just set the text from the observable. If you are looking at a different UI layout, please change your HTML accordingly but keep the above in mind.

Also check within KO documentation about the use of containerless bindings and the with binding. These may help you create better HTML layouts.

Check this fiddle: http://jsfiddle.net/7BNQy/

Modified HTML :

<table class="table">
<thead>
</thead>
<tbody data-bind="foreach: categories">
    <tr>
        <td data-bind="text: Name">

        </td>
        <td>
            <table>
                <tbody data-bind="foreach: categoryVariables">
                    <tr>
                        <td data-bind="text: Name"></td>
                    </tr>
                </tbody>
        </table></td>
        <td><button data-bind='click: $root.addCategoryVariable'>Add a category variable</button></td>
    </tr>
</tbody>
</table>

<button data-bind='click: addCategory'>Add a category</button>