Question

I have an issue where my dynamic html is being repopulated when knockout.js sets an observable array from an ajax call. The dynamic HTML gets reloaded when this happens causing the init function in it to execute twice and rebind everything else. Why would my html observable rebind the dynamic HTML? I would use Fiddle but I have a ton of code.

Ajax Callback

app.viewModel.members.bracket.parts(response.Parts);

ko.applyBindings(app.viewModel.members, app.viewModel.members.container().find('> div:first').get(0));

Container

<div id="container" class="clearfix" data-bind="html: members.html, container: {}">
</div>

<script type="text/javascript">
  app.viewModel.members = {
        container: ko.observable($('#container')),
        html: ko.observable(''),
        bracket: {
              parts: ko.observableArray([])
        }
    };
</script>

Dynamic HTML

<div data-bind="with: members.bracket">
    <div>   
        <div id="bracket-wrapper">
            <div data-bind="template: { name: partTemplate, foreach: parts }"></div>
        </div>
    </div>
</div>

<script type="text/html" id="part-template-1">
    <div class="bracket-part" data-bind="bracketGameInit: { left: $data.left, top: $data.top, height: $data.height, width: $data.width }, css: { 'reverse-bracket' : $data.reverse }"></div>
</script>

 app.members.bracket.init({
        pools: @Html.Raw(Model.DivisionPools.ToJSON()),
        teams: @Html.Raw(Model.DivisionTeams.ToJSON()),
        parts: @Html.Raw(Model.Parts.ToJSON())
    });

Answer 1

It was being caused by Observable Array Performance tip that I received. I updated it back to the old way of updating the observable array.

function populateGameNumbers(gameNumbers) {
        viewModel.gameNumbers([]);

        var numbers = [];
        for (var i = 0; i < gameNumbers; i++) {
            numbers.push(i + 1);
        }
        viewModel.gameNumbers(numbers);
        //viewModel.gameNumbers.push.apply(viewModel.gameNumbers, numbers );
    }