# Re-render compiled Ember templates

**URL:** <https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270>\
**Category:** Uncategorized\
**Created:** [September 15, 2014, 8:54pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270 "2014-09-15T20:54:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kadir\_Fuzaylov](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kadir_fuzaylov/32/16675_2.png) [@Kadir\_Fuzaylov](https://discuss.emberjs.com/u/Kadir_Fuzaylov)\
**Post date:** [September 15, 2014, 8:54pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/1 "2014-09-15T20:54:35Z")

</div>

How can I re-compile ember handlebars templates? Example: I have a url `/page/:page_id` which returns json object. This object describes the page structure. Each page has different structure.

```
{page: {
    id:2, 
    structure:[
        {type: 'row', children:[...]}, 
        {type: 'module', id: 42}
   ]
}

```

I have to dynamically change the template content according to the json object.

```
{{#row}}
    {{#container}}
        Inner text
    {{/container}}
{{/row}}
{{#module id=42}}

```

And recompile it

`Ember.TEMPLATES['page'] = Ember.Handlebars.compile(hbs)`

It works only for the first time. So overwriting `page` property in `TEMPLATES` doesn’t affect.

---

<div class="post-metadata">

**Author:** ![Spencer\_Price](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/spencer_price/32/14878_2.png) [@Spencer\_Price](https://discuss.emberjs.com/u/Spencer_Price)\
**Post date:** [September 15, 2014, 9:28pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/2 "2014-09-15T21:28:47Z")

</div>

In order to do what you’re asking, you would create a view class and update the `template` property on the view. (Though, this means that you’re compiling templates in the browser…are you sure you want to do this?)

An example (supposing this is the `PageDetail` route):

```
App.PageDetailView = Ember.View.extend({
  template: Ember.Handlebars.compile(hbs),
  updateTemplate: function() {
    // Logic for creating a new template 
    this.set('template', Ember.Handelbars.compile(newHbs));
  },
  controllerModelDidChange: function() {
    Em.run.once(this, 'updateTemplate');
  }.observes('controller.model')
});

```

You can also manually the DOM with the View object using `appendChild` and `removeFromParent`, etc, that way you’re not having to build a string template that then gets compiled. Not sure what the performance tradeoffs there would be.

That being said, the way things have been going with Ember you might be better suited in building Helpers and Components that handle every possibility for the page structures. So, you might get something like:

```
{{#each structure}}
  {{render-structure type=type}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![Kadir\_Fuzaylov](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kadir_fuzaylov/32/16675_2.png) [@Kadir\_Fuzaylov](https://discuss.emberjs.com/u/Kadir_Fuzaylov)\
**Post date:** [September 15, 2014, 9:40pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/3 "2014-09-15T21:40:53Z")

</div>

I thought about helpers and components. How to be in case with children

```
{{#each structure}}
    {{render-structure type=type}}
{{/each}}

```

What should be in render-structure compoent view code to render child in deep?

---

<div class="post-metadata">

**Author:** ![Spencer\_Price](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/spencer_price/32/14878_2.png) [@Spencer\_Price](https://discuss.emberjs.com/u/Spencer_Price)\
**Post date:** [September 15, 2014, 9:51pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/4 "2014-09-15T21:51:44Z")

</div>

So, the `render-structure` component could perhaps be recursive…

```
// PageDetail.hbs
{{#each item in structure}}
    {{render-structure type=item.type data=item}}
{{/each}}

// components/renderStructure.hbs
{{...Other template content...}}
{{#each child in data.children}}
  {{render-structure type=child.type data=child}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![Kadir\_Fuzaylov](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kadir_fuzaylov/32/16675_2.png) [@Kadir\_Fuzaylov](https://discuss.emberjs.com/u/Kadir_Fuzaylov)\
**Post date:** [September 15, 2014, 9:53pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/5 "2014-09-15T21:53:55Z")

</div>

Thanks you very much!

---

<div class="post-metadata">

**Author:** ![Kadir\_Fuzaylov](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kadir_fuzaylov/32/16675_2.png) [@Kadir\_Fuzaylov](https://discuss.emberjs.com/u/Kadir_Fuzaylov)\
**Post date:** [September 16, 2014, 3:08pm UTC](https://discuss.emberjs.com/t/re-render-compiled-ember-templates/6270/6 "2014-09-16T15:08:04Z")

</div>

I can’t find a way how to wrap children with element. Block - none, container - div, h2 - h2, module - component

```
"structure": [
    {
        "type": "block",
        "name": "departments",
        "children": [
            {
               "type": "container",
                   "children": [
                       {
                           "type": "h2",
                           "innerHtml": "Contact us today"
                       },
                       {
                          "type": "module",
                          "name": "ContactDepartment",
                          "theme": "responsive1",
                          "id": 1
                       },
                 ]
             }
         ]
    }
]

```

I should get something like

```
{{#h2}}
    {{innerHtml}}
    {{#if data.children}}
        {{#each child in data.children}}
            {{render-structure type=child.type data=child}}
        {{/each}}
    {{/if}}
{{/h2}}

```

or

```
{{#module id=id theme=theme name=name}}
    {{#if data.children}}
        {{#each child in data.children}}
           {{render-structure type=child.type data=child}}
        {{/each}}
    {{/if}}
{{/module}}

```