We have here our click counter component, which has this template. Even though it's simple, it requires some effort to grasp it, especially if you don't have the proper support from your editor or if the template is large and complex. There are a couple of different ways to define a component's template, and in this lesson, I will show you the X template way, which, in my opinion, is the best way to get started. So instead of having the template in a string in our JavaScript, we can add a script element in the HTML and set its type to text slash x template.
Then we'll provide it with the template markup. We also need to give it an ID so that we can reference it. The ID can be anything you'd like. I will name it Click Counter Template.
Now where we define the components template, instead of providing the actual template, we can reference the one we created using a CSS selector. Isn't that easier to work with? If we want to make a change, we go to the HTML where we have our full syntax highlighting and we take advantage of our editor features like autocomplete and error detection. One drawback of this approach is that we don't get the whole picture when we read the component's code.
But we have to go and check the HTML as well. Don't worry about that for now. js well enough, the solution will be straightforward. And in the browser, everything still works.
We have here our click counter component, which has this template. Even though it's simple, it requires some effort to grasp it, especially if you don't have the proper support from your editor or if the template is large and complex. There are a couple of different ways to define a component's template, and in this lesson, I will show you the X template way, which, in my opinion, is the best way to get started. So instead of having the template in a string in our JavaScript, we can add a script element in the HTML and set its type to text slash x template.
Then we'll provide it with the template markup. We also need to give it an ID so that we can reference it. The ID can be anything you'd like. I will name it Click Counter Template.
Now where we define the components template, instead of providing the actual template, we can reference the one we created using a CSS selector. Isn't that easier to work with? If we want to make a change, we go to the HTML where we have our full syntax highlighting and we take advantage of our editor features like autocomplete and error detection. One drawback of this approach is that we don't get the whole picture when we read the component's code.
But we have to go and check the HTML as well. Don't worry about that for now. js well enough, the solution will be straightforward. And in the browser, everything still works.