0

我有一个车把模板显示为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}}（在从后端请求数据时显示微调器）来保护插座，因此我已经验证了在某些情况下会出现问题。有两种可能的“渲染序列”：

  1. 索引路由被选中
  2. 从后端请求数据（isUpdating-> true）
  3. 显示微调器
  4. 接收到数据 ( isUpdating-> false)
  5. 遵循出口路径（“显示出口”）
  6. 处理出口，并更新 DOM

这工作正常。但是在重新选择索引路由时，顺序发生了变化：

  1. 索引路由被选中
  2. 请求数据 ( isUpdating-> true)
  3. 出口被处理（即使数据isUpdating!!）
  4. 然后 ember 意识到应该遵循另一条路径，并且显示了微调器
  5. 接收到数据 ( isUpdating-> false)
  6. 现在遵循模板中的“显示出口”路径，但outlet并未真正处理，因此不再更新 DOM。

所以我想重要的问题是：

  • （第 3 步）即使isUpdating是真的出口，为什么还要处理？
  • （第 6 步）为什么 ember 告诉我正在显示出口，但它并没有真正处理出口？
4

1 回答 1

0

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

希望能帮助到你。

于 2013-08-05T17:14:21.333 回答