How to render content without script tag

Performance
1

I have got code like this:

<div>{{name}}</div>

And this would turn even a simple one way bound attribute into something like

<script id="metamorph-94-start" type="text/x-placeholder"></script>
   My name
<script id="metamorph-94-end" type="text/x-placeholder"></script>

And it is quite annoying and I suspect there is performance consequences with this within a large list.

I checked Discourse and Yapp, and it seems that they do not have script tags wrapped around these kinds of properties and look to be quite performant.

Is there something obvious I am missing here? I am trying to figure out some ways to improve list performance.

Really appreciate the help!!

2

All bound values use Metamorph, and so they all have those script tags. If you’re not seeing them in some places, it’s because those values are not bound (possibly because of the #group helper, or other custom redraw logic).

The tags themselves are not really expensive. The biggest problem with them is that they break CSS selectors like :first-child. There is ongoing work to do away with them (see https://github.com/tildeio/htmlbars).

1 Like
3

If it’s an unbound property you can use {{unbound name}} but this might not be what you’re trying to do.

4

Thanks! “unbound” does work!

I do wanna try out group helper as well. But how do I plug it in? I am currently using ember-rails.

5

I actually figure this out. I copy-pasted the group helper code. :slight_smile: