Hello everybody,

I am stuck in my attempt to use a DOM-sourced DataTable with Handlebars in an Ember application.
What I'd like to achieve is that a table in DOM gets filled dynamically using Handlebars, and the DataTable adjusts based on the recent DOM manipulations.

I am starting with an empty HTML table. The model array is empty initially.

<table id="labelsTable" class="table table-striped table-hover dt-responsive">
    <thead>
        <tr>
            <th class="text-left">Name</th>
            <th class="text-center">Type</th>
            <th class="text-right">Quantity</th>
        </tr>
    </thead>
    <tbody>
    {{#each label in model}}
        <tr>
            <td class="text-nowrap text-left">{{label.id}}</td>
            <td class="text-nowrap text-center">{{label.type}}</td>
            <td class="text-nowrap text-right">{{label.quantity}}</td>
        </tr>
    {{/each}}
    </tbody>
</table>

Then upon a button click the model array gets filled and this triggers filling the table's DOM with some new rows.

Finally I am trying to synchronize DOM changes using rows().invalidate() and redraw the table. But in fact the synchronization runs in the opposite direction: the DOM gets cleared and the table is finally just empty.

Here I found a statement from Allan regarding the rows().invalidate():

By default it will automatically detect if your original data source is DOM or an object. It will assume that the original is the most up-to-date and therefore update the other. i.e. if your table is DOM sourced and you update the DOM, then call invalidate() it will read the data from the DOM.

It works another way in my case.
What am I doing wrong?

Appreciate your replies,
Andre