# How to render a template to html on component?

**URL:** <https://discuss.emberjs.com/t/how-to-render-a-template-to-html-on-component/12375>\
**Category:** Uncategorized\
**Created:** [February 4, 2017, 8:16am UTC](https://discuss.emberjs.com/t/how-to-render-a-template-to-html-on-component/12375 "2017-02-04T08:16:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![weizeyan](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@weizeyan](https://discuss.emberjs.com/u/weizeyan)\
**Post date:** [February 4, 2017, 8:16am UTC](https://discuss.emberjs.com/t/how-to-render-a-template-to-html-on-component/12375/1 "2017-02-04T08:16:18Z")

</div>

now, i need render a template with ArrayList data，return the html string.

```
didInsertElement : function(){
	var html = render("templatename.hbs", {
		list : ["a", "b", "c"]
	});
	
}

```

---

<div class="post-metadata">

**Author:** ![boris](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/boris/32/12457_2.png) [@boris](https://discuss.emberjs.com/u/boris)\
**Post date:** [February 5, 2017, 9:15pm UTC](https://discuss.emberjs.com/t/how-to-render-a-template-to-html-on-component/12375/2 "2017-02-05T21:15:40Z")

</div>

This is what we have (CoffeeScript code):

```
TemplateToDomService = Ember.Service.extend
  _getRenderer: (owner) ->
    owner.lookup('renderer:-dom')

  render: (template, context) ->
    new Ember.RSVP.Promise (resolve) =>
      # create a new component
      owner = Ember.getOwner(this)

      component = Ember.Component.create
        style: 'display:none;' # hide it
        layout: Ember.HTMLBars.compile(template)
        renderer: @_getRenderer(owner)
      Ember.setOwner(component, owner)

      component.setProperties(context)

      component.one 'didRender', ->
        element = @element.cloneNode(true)
        component.destroy()
        resolve(element)

      # append the component to the body to make it render
      component.append()

```

Note that this is extremely hacky and will probably stop working at some point. It still does work in Ember 2.11 though.

---

<div class="post-metadata">

**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\
**Post date:** [February 5, 2017, 11:41pm UTC](https://discuss.emberjs.com/t/how-to-render-a-template-to-html-on-component/12375/3 "2017-02-05T23:41:42Z")

</div>

Are you having trouble with the rendering part or the html part?

The rendering part is done by Ember. You can just bind your list to the template.

The html part is just read it back out again. `this.$().html()`