CODEWITHSUNDEEP
ember.jshandlebars.js
Amed R
Amed R

Reputation: 110

On demand handlebars compiling within Ember.view component

I'm trying to append HTML elements to the UI upon user clicks, such elements would be assembled and precompiled within a view component like this:

NewElementView = Ember.View.extend(
  tagName: 'li',

  click: ((event)->
    this.insertElement()
  ),

  blueprint: (->
    '<div id="{{dom_id}}">
      <textarea></textarea>
      <button {{action "submit"}}>Save</button>
     </div>'
  ).property()  

  insertElement: (->
    html = this.get("blueprint")
    template = Ember.Handlebars.compile(html)
    context = { dom_id: "foo" }
    Ember.$(template(context)).appendTo("#container")
  )
)

When running Ember.Handlebars.compile(html) line it raises Uncaught TypeError: Cannot read property 'push' of undefined

Any idea of why?

Thanks in advance!

Upvotes: 0

Views: 294

Answers (1)

Alberto
Alberto

Reputation: 165

Ember.Handlebars.compile expects an object with a data property.

What you are trying to do can be achieved with the following

template

<script type="text/x-handlebars" data-template-name="my-custom-view">
    <div {{bind-attr id='view.dom_id'}}>
      <textarea></textarea>
      <button {{action "submit"}}>Guardar</button>
    </div>
</script>

code

App.NewElementView = Ember.View.extend
  tagName: 'li'

  click: (event) ->
    @insertElement() 

  insertElement: ->
    view = Ember.View.create
      templateName: "my-custom-view"
      container: @container
      dom_id: "foo"

    view.appendTo("#container")

Here a working example http://emberjs.jsbin.com/rapepepogi/17/edit?html,js,output

Upvotes: 1

Related Questions