CODEWITHSUNDEEP
ember.jshtmlbars
Matthew
Matthew

Reputation: 411

Creating a raw html component in Ember 2.0

I'm attempting to make a design guide where I show code as html or css.

My understanding is that I should be making a component because I can use the {{yield}} to get the code do display like below.

Usage: 

{{#raw-output}}
  <div>test</div>
{{/raw-output}}

components/raw-output.hbs:

<pre>
<code>
    {{{yield}}}
</code>
</pre>

My only issue is that I cannot figure out how to output the raw code in HtmlBars.

EDIT: Final product

//raw-output.js
import Ember from 'ember';

export default Ember.Component.extend({
    didInsertElement: function () {
        var $element = $(this.get('element')), 
        $code = $("code", $element), 
        html = $code.html();
        $code.empty().text(html);
    }
 });

//raw-output.hbs

<code>
    {{{yield}}}
</code>


//usage
{{#raw-output}}
    <div>name</div> 
{{/raw-output}}

Upvotes: 0

Views: 540

Answers (3)

acid_srvnn
acid_srvnn

Reputation: 693

You can use it in the same way as you mentioned. In the didInsertElement of your component, get the code lines, escape them and then show the escaped lines.

Working Example : Twiddle

Upvotes: 1

artych
artych

Reputation: 3669

As an option try ember-code-snippet addon.

This is an Ember component (and ember-cli addon) that lets you render code snippets within your app. The code snippets can live in their own dedicated files or you can extract blocks of code from your application itself. Features:

  • syntax highlighting.
  • ember-cli's auto-reload will pick up changes to any of the snippet files.
  • the component uses file extensions to help highlight.js guess the right language.

For example, this addon is used in addepar/ember-table demo.

Upvotes: 0

Daniel
Daniel

Reputation: 18672

Usage:

{{raw-output model='<div style="background: red">test</div>'}}

components/raw-output.hbs:

<pre>
<code>
    {{model}}
</code>
</pre>

You don't need to use yield. Use normal property like model.

Upvotes: 1

Related Questions