09. Text and HTML


So we're going to do a quick recap of xtext and then we're going to look at the xhtml directive which allows us to, as it suggests, output html. Let's start with a really simple component here
again and just say xdata and let's go ahead and output a string. Let's kind of go back to the example we initially looked at where it was hello world. So we know that we can use any element, doesn't matter what it is, it could be an h1, and we can use xtext in here to output the value of whatever you wanted. Let's actually make this hello world. So let's go over, check this out,
and we get hello world output as the h1. So pretty much any element you can use xtext on that actually allows you to set text within it, doesn't matter, as long as it can set some inner text it will work. Now we already discussed that this can be an expression or some other method that you want to call on this like toUpperCase, that's going to work as well. We get hello world in
shouting and let's get rid of that extra r and so on and so forth. So you could again do some kind of calculation inside of xtext and that would work as well. You kind of get the idea. But what about outputting html? Let's say that you made a request to your API, you had some html perhaps there that you wanted to output, you would not get on with xtext. Let's have a look at this. So I'm going to
go ahead and just comment this out and let's create another div down here to demo this. Let's just say we're working with markdown which we're actually going to look in the next practical project in the next episode. We're going to build a markdown parser with alpine. So let's just say we had some kind of markdown in here that was rendered or some kind of body of a comment maybe
that had a paragraph in here or something else. Let's just say hello. Now that's not going to work if we use xtext. So let's just use xtext output that body and see what we get. And this would actually probably be a div. So let's just swap this over and let's have a look. There we go. We get the literal output with these characters. If we inspect this you can see it's literally just
them characters being output. Instead what we can do is use xhtml. Let's go over and see the difference and there we go. We actually have a paragraph. Let's make this say strong just to demo this out and there we go. You can see that that works. Now it goes without saying that you have to be really careful with what you output using xhtml. You need to make sure that this is not
freely user submitted information. For example if you were using xhtml on data that had been submitted through by a user you are potentially allowing cross-site scripting attacks in your application. But this can be really useful for things like markdown that has been pre-parsed and sanitized on your server. With that said let's take a look at doing that in the next part.
19 episodes2 hrs 10 mins


Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.