ember.js - テンプレートが解析され、データは正しいが、要素が DOM に追加されない

Question

として表示されているハンドルバーテンプレートがありますoutlet。初めてルートを開くと、期待されるデータを含むテーブルが表示されます。しかし、を使用して別のルートからこのルートに遷移するたびにtranisitionToRoute、要素は DOM に追加されません。

テンプレートにロギングを追加したので、データがそこにあり、テンプレートが処理されていることがわかりますが、要素は DOM に追加されません。これはトップレベルのテンプレートです:

{{hbsdebug "xxxx"}}
{{log this}}
{{log this.content}}
<article>
    <form class="form-horizontal">
        <fieldset>
            <div id="legend" class="">
                <legend class="">{{capitalize pluralHuman}}&nbsp;&nbsp;&nbsp;<span class="badge">{{entriesLength}} records</span>
                    <div class="pull-right">
                        {{#if allowDeleteAll}}
                            <a {{action destroyAllRecords}} class="btn btn-primary"><i class="icon-remove"></i> Delete All {{capitalize pluralHuman}}</a>
                        {{/if}}
                        {{#linkTo newRoute class="btn btn-primary"}}<i class="icon-plus"></i> Add {{capitalize singularHuman}}{{/linkTo}}
                    </div>
                </legend>
            </div>

            {{view SettingsApp.MessageTrayView id="message-tray-view"}}

            {{#if isUpdating}}
                {{mylog "Loading data!!!" null}}
                <div style="text-align:center;"><br/><br/><img src="images/circular_loader.gif" /><br/><br/>Loading the list of {{pluralHuman}}...</div>
            {{else}}
                {{#if entriesLength}}
                  {{mylog "Showing outlet > entriesLength >" entriesLength}}
                  {{outlet}}
                {{else}}
                  {{mylog "Showing partial empty_list" null}}
                  {{partial "empty_list"}}
                {{/if}}
            {{/if}}
        </fieldset>
    </form>
</article>

これは私のoutletです：

{{hbsdebug "services/index"}}
{{mylog "services/index > this"    this }}
{{mylog "services/index > content" content }}
<table class="table">
<thead>
    <tr>
        <th>Name</th>
        <th>Startnode</th>
        <th>Nextnode</th>
        <th>JumpIfBusy</th>
        <th>JumpIfNoAnswer</th>
        <th style="width: 36px;"></th>
    </tr>
</thead>
<tbody>
    {{#each model}}
    {{log this}}
    {{mylog "services/index.each > this"  this  }}
        <tr class="odd-even">
            <td>{{#linkTo controller.showRoute this}}{{grayOutIfUndef2 properties.name formattedName "(undefined)"}}{{/linkTo}}</td>
            <td>{{grayOutIfUndef formattedStartnode}}</td>
            <td>{{grayOutIfUndef formattedNextnode}}</td>
            <td>{{grayOutIfUndef formattedJumpIfBusy}}</td>
            <td>{{grayOutIfUndef formattedJumpIfNoAnswer}}</td>
            <td>
                <a {{action startEditing this}}><i class="icon-pencil"></i><a/>&nbsp;&nbsp;
                <a {{action destroyRecord this}}><i class="icon-remove"></i><a/>
            </td>
        </tr>
    {{/each}}
</tbody>
</table>

(ヘルパーhbsdebugとはlog、mylogテンプレートが処理されていることをコンソールで確認するためだけに存在します。私は非常に混乱しているため、別の方法を使用してログを記録しています)

これは、テーブルに「戻る」元のテンプレートです。

<form class="form-horizontal">
    <fieldset>
        <div id="legend" class="">
            <p class="form-action-title">{{grayOutIfUndef formattedName}}</p>
        </div>

        <div class="form-content-wrapper-fixed">
            {{ propPartial "showPartial" }}
        </div>

        <div class="form-actions">
            <a class="btn btn-primary" {{action startEditing this}}><i class="icon-pencil"></i> Edit</a>
            <a class="btn" {{action backToList}}><i class="icon-th-list"></i> Back to list</a>
            <a class="btn pull-right" {{action destroyRecord this}}><i class="icon-remove"></i> Remove</a>
        </div>

    </fieldset>
</form>

そして、これはbackToListアクションです：

backToList: function () {
    console.log('backToList > indexRoute=%o', this.indexRoute);
    this.transitionToRoute(this.indexRoute);
}

は文字indexRoute列services.indexです。

問題は何でしょうか？ember が DOM を適切に更新するのを妨げているのは何ですか?

アップデート

(データがバックエンドから要求されている間にスピナーを表示するため)でアウトレットを保護している{{if isUpdating}}ため、特定の状況で問題が発生することを確認しました。2 つの「レンダリングシーケンス」が考えられます。

インデックスルートが選択されました
データはバックエンドから要求されます ( isUpdating-> true)
スピナーが表示されます
データを受信しました ( isUpdating-> false)
アウトレットパスがたどられます（「アウトレットを表示」）
アウトレットが処理され、DOM が更新されます

これはうまくいっています。ただし、インデックスルートを再選択すると、順序が変更されます。

インデックスルートが選択されました
データが要求されます ( isUpdating-> true)
アウトレットは処理されます (データは処理されますがisUpdating!!)
次に、ember は別の道をたどる必要があることに気付き、スピナーが表示されます。
データを受信しました ( isUpdating-> false)
現在、テンプレートの「アウトレットを表示」パスがたどられてoutletいますが、実際には処理されていないため、DOM は更新されていません。

したがって、重要な質問は次のとおりだと思います。

isUpdating(ステップ 3) trueなのにアウトレットが処理されるのはなぜですか?
(ステップ 6) ember がアウトレットが表示されていると言っているのに、実際にはアウトレットを処理していないのはなぜですか?

ember.js - テンプレートが解析され、データは正しいが、要素が DOM に追加されない

アップデート

1 に答える 1

Related

Reference