0

ノックアウト js が ajax 呼び出しから監視可能な配列を設定すると、動的な html が再設定されるという問題があります。これが発生すると動的 HTML がリロードされ、その中の init 関数が 2 回実行され、他のすべてが再バインドされます。HTML オブザーバブルが動的 HTML を再バインドするのはなぜですか? 私は Fiddle を使用しますが、大量のコードがあります。

Ajax コールバック

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

1 に答える 1

0

これは、私が受け取った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 );
    }
于 2012-07-08T22:09:42.273 に答える