Repeating controls in popover with foreach loop

[kevitra]

I have a pop over in which I want to display a list of checkboxes. There should be 17 checkboxes in the pop over when it renders. Instead each checkbox is rendered 17 times (for example the checkbox with the name Dog is displayed 17 times) so I end up with 289 checkboxes.

                                <button class="btn btn-primary" data-bind="popover: { options: { title: 'Column Selection', placement: 'bottom'},template: popoverTemplate, data: ourViewModel}">
                                    Click
                                </button>

The DIV that displays the checkboxes: div id="popover_content_wrapper" > div class="temp" data-bind="foreach: CBColumns"> label> input type="checkbox" data-bind="checkedValue: Name(), checked: $root.checkedItems"> span data-bind="text: Name"> /label> /div> /div>

The VM has: self.popoverTemplate = ko.observable('popover_content_wrapper');

If I write out the checkboxes with the exact same DIV outside of the popover it properly writes out the 17 checkboxes. I have verified that if I check a box in the popover it does update the same checkbox on the page so the bindings are working.

Any ideas what I am doing wrong? Thanks!

[faulknercs]

Hello,

Not sure, how you have achieved this behavior. I have try to create example with checkboxes and it works fine. Please, see this: https://jsfiddle.net/faulknercs/1v0fv5cd/ Hope, it will help you.