Widgets: Single Root Template
We would now like to highlight a few rare aspects. The first one is using a HTML template with a single root.
As you have seen we have used before an HTML file where we have defined the inner structure of oour widget. Some times the HTML template have to be a single root template. This means that the template has only one HTML element in the root.
Let's start creating a new file in the same folder of our widget. As it is mostly the same as
index.ejs.html we will use here the include statement of the EJS parser and sourround the content
Now we create a new widget which extends our previous widget. The only change is the new function
buildStructure which will be overriden:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
You see here that we have used the jQuery function
replaceWith instead of
html. The second thing
you have to pay attention is the redefinition of
have to be done because the origin element was removed and any following functions assume that the
element can be found there.
Let's use the new widget in our application:
1 2 3 4 5 6 7 8 9 10 11 12 13