Is it possible to render handlebars in content which is produced using markdown?

1

Hi,

How do we link to another page using the link-to component when that content is being generated by (for example) markdown?

2

So the server renders a blob of markdown?

The easiest way to handle this situation is just to get it from the server:

In your route:

model() {
  Ember.$.get( "path/rendered-markdown.html");
}

In your template:

{{{model}}

This should put the content of the response into your ember app.

Let me know if this is helpful. I could be miss understanding your question.

3

Many thanks for getting back.

My model hook is currently

model(params) {
  return this.store.findRecord('page',params.slug);
}

The model I am returning from the server contains the markup from the admin, in markdown form. If that’s printed out in the template it’s automatically escaped so I can’t use any handlebars content or convert a standard anchor tag. Am I taking the wrong approach completely here?

,

4

{{{model.markdown}}} should do the trick. The triple brace omits escaping for things like this.

5

Hi,

Many thanks for getting back - sorry for the late reply.

I am still struggling with this I’m afraid - can I show you what I am returning as a test from the server?

In my route I have

model() {
  return Ember.$.get('/api/index.html');
}

Where my index file prints out a simple string with some handlebars in it, eg

<p>Hello world {{link-to 'Contact' 'contact'}} does this work</p>

In my template I just print {{model}} or your suggestion {{{model}}} and I get

Hello world {{link-to 'Contact' 'contact'}} does this work

I’ve tried using Ember.String.htmlSafe when returning the string from the model hook but that doesn’t help either.

The ability to be able to link to other pages in an app from content which is provided is so fundamental that there must be an easy solution to this but I’m struggling to find it!

6

Well, you need to compile the handlebars somehow, you can’t just output it as a string in the template.

In earlier versions of Ember I would’ve used something like:

App.MarkDownComponent = Ember.Component.extend({
    layout: Ember.computed(function() {
        var content = "<p>Hello world {{link-to 'Contact' 'contact'}} does this work</p>";
        return Ember.Handlebars.compile(content);
    });
}

I don’t know how to do this with Ember CLI, but I found this old GitHub issue where someone is having issues with Ember.Handlebars.compile() not existing in a production build.

1 Like
7

Hi,

Many thanks for your reply. Will look into your suggestion in more detail. Surely this is something that we need a solution for?

8

Hi,

Sorry for the late reply. Do we know if this is possible in Ember 2 - to use the equivalent of Ember.Handlebars.compile?

When I tried, got

Error: Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js`prior to calling `compile`.

I then tried installing ember-template-compiler but not sure how to implement this and if it’s compatible with Ember 2?