Question

/START description of why

I’m doing a ‘load more’ type of interaction: user gets at bottom of a page, I load more content.

As I’m using a plugin that formats content in a ‘pinterest-style’ (masonry), I need to take the output of a rest call, formatted using an ember view, and i’m doing something like:

<div id="list">
</div>

<div id="hidden" style="display:none">
  {{#each item in App.itemsController}}
    test {{item.id}}
  <br />
  {{/each}}
</div>

What I want to do is, load the content in the hidden div, and then pass its HTML generated content to the plugin to process in my formatted list view.

If I just copy the #hidden content, the Ember scripts get in, and on subsequent ‘load more’, content is inserted in the #list, in addition of going in the #hidden div.
That’s because I copied the entire handlebars.

So I get rid of the container tag, the one I supposed was wrapping the controller content binding, but even when stripping it from the content I pass to #list, the #list still auto-updates when a ‘load more’ is called.

I know that’s a dirty hackish thing, but in order to improve performance in the client I must take a similar route.

/END description of why

//ACTUAL QUESTION 😉

Given this background, the question is, stripping the container metamorph script tags (like the ones here below), and just take the content inside them, shouldn’t get rid of the auto-updating content functionality?

<script id="metamorph-X-start" type="text/x-placeholder"></script>

//ALL THE CONTENT

<script id="metamorph-X-end" type="text/x-placeholder"></script>

Inside those, I just have the actual content generated, like:

<script id="metamorph-9-start" type="text/x-placeholder"></script>
  test <script id="metamorph-59-start" type="text/x-placeholder"></script>2873<script id="metamorph-59-end" type="text/x-placeholder"></script>
  <br>
<script id="metamorph-9-end" type="text/x-placeholder"></script>

<script id="metamorph-10-start" type="text/x-placeholder"></script>
  test <script id="metamorph-60-start" type="text/x-placeholder"></script>2872<script id="metamorph-60-end" type="text/x-placeholder"></script>
  <br>
<script id="metamorph-10-end" type="text/x-placeholder"></script>

The alternative is programmatically render the template inside a variable and process that, which is surely a better way of doing this, but I just wonder how the #each binding works internally as I thought the metamorph was doing that.

Answer 1

Have you looked into using a CollectionView and calling the plugin through the didInsertElement callback?

e.g.

MyList = Ember.CollectionView.extend({
             itemViewClass: 'App.ListItem',
             didInsertElement: function(){
                  view.$().jqueryPlugin({ ... })
             }
         })