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只是在控制台中看到模板正在处理。我很困惑，我正在使用不同的方法进行日志记录）

这是我从中回过来的模板＆＃34;到桌子：

<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}}保护插座（在从后端请求数据时显示微调器），我已经验证在某些情况下会出现问题。有两种可能的＃34;渲染序列＆＃34;：

选择了索引路径
从后端请求数据（isUpdating - ＆gt; true）
显示Spinner
收到数据（isUpdating - ＆gt; false）
遵循出口路径（＆＃34;显示出口＆＃34;）
处理插座，更新DOM

这很好用。但是当重新选择索引路线时，订单会改变：

选择了索引路径
请求数据（isUpdating - ＆gt; true）
处理插座（即使数据isUpdating !!）
然后ember意识到应该遵循另一条路径，并显示微调器
收到数据（isUpdating - ＆gt; false）
现在＆＃34;显示出口＆＃34;遵循模板中的路径，但outlet未真正处理，因此DOM不再更新。

所以我猜重要的问题是：

（步骤3）即使isUpdating为真，为什么要处理出口？
（步骤6）为什么格柏告诉我出口正在展示，但它并没有真正处理出口？

Answer 1

我能想到的一个问题可能是您的services.index路由需要一些内容，因此在执行this.transitionToRoute('services.index');而不传递模型/内容时，转换会成功，但不会显示内容。因此，继续猜测您还需要传递一些要使用的内容/模型，例如this.transitionToRoute('services.index', this.get('content'));或您的services.index路径所需的任何内容。

希望它有所帮助。

正在解析模板，数据是正确的，但没有元素添加到DOM

更新

1 个答案: