How to render a template to html on component?


#1

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

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

#2

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.


#3

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()