Template is being parsed, data is correct, but no elements are added to DOM

Question

I have a handlebars template being displayed as an outlet. When I open the route for the first time, the table is shown with the expected data. But whenever I transition to this route from another route, using tranisitionToRoute, the elements are not added to the DOM.

I have added logging to the template, so I know that the data is there and the template is being processed, but no elements are added to the DOM. This is the top-level template:

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

This is my 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>

(the helpers hbsdebug, log and mylog are just there to see in the console that the template is being processed. I am so confused that I am logging using different methods)

This is the template from which I am "transitioning back" to the table:

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

And this is the backToList action:

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

Where indexRoute is a string, i.e. services.index.

What could the problem be? What could be preventing ember to properly update the DOM?

UPDATE

Since I am protecting the outlet with an {{if isUpdating}} (to show a spinner while data is being requested from the backend) I have verified that the problem occurs in certain situations. There are two possible "rendering sequences":

The index route is selected
The data is requested from the backend (isUpdating -> true)
Spinner is shown
The data is received (isUpdating -> false)
The outlet path is followed ("Showing outlet")
The outlet is processed, and the DOM updated

This is working fine. But when re-selecting the index route, the order is changed:

The index route is selected
The data is requested (isUpdating -> true)
The outlet is processed (even though the data isUpdating!!)
Then ember realizes that another path should be followed, and the spinner is shown
The data is received (isUpdating -> false)
Now the "Showing outlet" path in the template is followed, but the outlet is not really processed, so the DOM is not updated anymore.

So I guess the important questions are:

(step 3) Why is the outlet processed even though isUpdating is true?
(step 6) Why is ember telling me that the outlet is being shown, but it is not really processing the outlet?

intuitivepixel intuitivepixel · Accepted Answer · 2013-08-05T17:14:21

One problem I can think of could be that your services.index route needs some content, so when doing this.transitionToRoute('services.index'); without passing along the model/content the transition would succeed but no content is displayed. So continuing guessing you need to pass along also some content/model to be used, like this.transitionToRoute('services.index', this.get('content')); or whatever content your services.index route needs.

Hope it helps.

Template is being parsed, data is correct, but no elements are added to DOM

UPDATE

1 Answers