ember.js: 2.3.0: Custom template not working in Component

Hi,

Trying to do something along these lines working, but to no avail. The “I got wrapped” content never gets rendered. (This is a home-made markdown converter we have made.)

The reason why I need to use Ember.HTMLBars.compile, instead of just using a string is that we want to support data-binding within the Markdown content.

Of course, we are no longer extending Ember.view, which is no longer available, but instead doing this in an Ember.Component, like below. Could this be causing the issue? Ember.Component derives from Ember.View so I’d assume it would work, but…

export default Ember.Component.extend({
  layout: Ember.HTMLBars.compile("<div class='my-decorative-class'>{{yield}}</div>"),
  template: Ember.HTMLBars.compile("I got wrapped")
});

I cannot even get a basic example like that work, which indicates to me that the example is outdated and maybe not even working any more. (or maybe more correctly, not working from a component)

The previous code we had looked something like this. It didn’t work at all; no content was rendered at all. (The template does indeed have a {{yield}} statement in this case.)

import Ember from 'ember'
import layout from './template'

export default Ember.Component.extend
  layout: layout

  _yield: (context, options, morph, blockArguments) ->
    view = options.data.view
    markdown = (@get('text') || '').toString()
    content = marked(markdown)
    content = Ember.Handlebars.compile(content)

    view.appendChild(Ember.View,
      isVirtual: true
      tagName: ''
      layout: content
      _blockArguments: blockArguments
      _contextView: view
      _morph: morph
      context: @get('content')
    )

I know that _yield is not a very public API. 😄 I’d be happy to change this in whichever way. The ability to support data-binding within the Markdown is the critical part; just getting it rendered and displayed in the template is trivial if you skip that.

Huge thanks in advance.