동적 HTML 및 knockout.js Ajax 요청에서 HTML 리 바인딩

Question

knockout.js가 관찰 가능한 배열을 ajax 호출로 설정하면 동적 HTML이 다시 채워지는 문제점이 있습니다. 동적 HTML이 발생하면 다시로드되어 init 함수가 두 번 실행되고 다른 모든 것을 리 바인드합니다. 왜 내 HTML 관찰 가능 동적 HTML을 리바 인 텐데? 나는 Fiddle을 사용할 것이지만 나는 많은 코드를 가지고있다.

아약스 콜백

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

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

컨테이너

<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> 

동적 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

그것은 원인이되고 있었다 내가받은 Observable Array Performance 팁. 나는 그것을 관찰 가능한 배열을 업데이트하는 오래된 방법으로 다시 업데이트했다.

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); 
    }