Condtionally show markdown

[kylehodgson]

I have a page that uses a parameterized data loader that may, or may not, return any rows. If it does, basically I want to show the page, and if it doesn’t I just want to display a message “not enough data available” kind of thing. I’m not new to JS, but I’m not an expert either, especially when it comes to front end JS so I’m likely just missing something.

When I’ve tried a conditional template, it seems to break when the content I want to conditionally show goes longer than one line; e.g. this works fine:

${ mydata.length==0 ? `Not enough data` ? `Enough data!` }

But if I try to put several (or any more than one) lines of markdown, HTML etc where it says “Enough data” Observable framework simply shows the conditional code in the browser. I suppose I could “wrap” every line of markdown this way, but that sounds time consuming and difficult to maintain. Thoughts?

[dkrasne]

Here's what I did in a similar situation:

I created a constant ternary variable (somewhat like you've done, but inside a js block), and I just assigned it null if the length was zero (and assigned it a plot to display, otherwise). (It's called plotDisplay if you want to search the page for it.) Then I wrote an if statement that selected between two different display() statements:

if (!plotDisplay) {
	display(html`<p>Based on information currently in the database, there are no intertexts in the specified passage.</p>`)
} else {

display(html`<fairly long HTML page here>`)

Hopefully that helps!

[Fil]

In Framework, Markdown is not rendered "live" by the browser, but compiled at build time (or "server-side"). The placeholder that you fill with the condition is either plain text or a DOM node — as in @dkrasne's suggestion. It is possible to render markdown client-side, but a bit more convoluted since you need to import a markdown library. See #895 for more.

[mbostock]

I suspect this is a syntax confusion problem. Certain JavaScript expressions can’t fit inside ${…} because they get interpreted as Markdown. If you pull the JavaScript code out into a fenced code block as a function myStuff() and then call it from Markdown as ${myStuff()}, you can avoid this confusion.