CODEWITHSUNDEEP
htmlcomponentscode-reuse
JLeonard
JLeonard

Reputation: 9158

Reusable view components in HTML

Can you create reusable components in html? Let's say I want to encapsulate some css / html and js into a tidy reusable component. How do web developers do this? I'm coming from the Flex, C# side of the planet.

Upvotes: 6

Views: 5247

Answers (5)

prompteus
prompteus

Reputation: 1032

2017 update

This question is 7 years old and a lot has changed since. Web components and are now implemented or can be used with polyfills in every major browser. Which means you can use Polymer by Google or X-Tag supported by Microsoft made exactly for this.

Sample approach using Polymer:

custom tag declaration in custom-tag.html:

<dom-module id="custom-tag">

    <template>

        <style>
            h1 {
               color: red;
            }               
        </style>

        <div class="text-holder">       
            <h1>[[name]]</h1>
            <p>[[description]]</p>
        </div>

    </template>

</dom-module>

<script>
    Polymer({
        is: "custom-tag",
        properties: {
            name: String,
            description: String
        }
    });
</script>

how to use custom tag in your page:

include tag in head:

<link rel="import" href="path/to/custom-tag.html"/>

and then:

<custom-tag
    name="Lorem"
    description="Lorem ipsum dolor sit amet.">
</custom-tag>

You'll need a simple http server because of the html import. Encapsulation you talked about is backed by Shadow DOM - javascript and css packed inside of custom tag won't "bleed out" and change anything outside of the element and vice versa (unless you force it). Polymer comes out with quite large asset of elements, you can find it here.

Everything about using elements and creating your own is covered here.

Upvotes: 3

Vineeth Pradhan
Vineeth Pradhan

Reputation: 8371

You can try out the templating engines, like google closure template tools.

What you do here is basically create html layouts in a special file called soy files for which you are going to feed the data passed in as parameters and these data are going to be interpreted dynamically with javascript/java. Check out their tutorials, its pretty good. Closures are widely used in Gmail, Youtube and mostly all of Google's products.

Upvotes: 0

Chris J
Chris J

Reputation: 9262

Generally you can put snippets into a separate file that you can add in with a server side include:

<!--#include FILE="you_snippet.html" -->

If you have the option, you might want to have a look at some template languages like Apache Velocity. In Velocity, not only can you include different files, you can define macros that will generate the html for you.

Upvotes: 0

Alex Mcp
Alex Mcp

Reputation: 19315

It depends on your environment. HTML is (in a simple environ) often included with a server-side include (the syntax of which will depend on your server).

That way you could have:

<!-- #include header.html -->
<h1>Blog Page</h1>
<p>content...</p>
<!-- #include footer.html -->

Javascript is included externally so can be called from anywhere. If you're in a "simple" environment (no server-side code, CMS, etc) you might call module.js which in turn loads specific CSS styles and injects into the DOM the HTML you require.

If you're using a CMS of any sort, they will often have a module idea or plug-ins that wrap this up for you. What are you working with here?

Upvotes: 0

Matthew Flaschen
Matthew Flaschen

Reputation: 284927

You can use Server-Side Includes to directly import pieces of HTML (e.g. a header), but most frameworks these days tend to approach things at a higher level, e.g. Apache Taglibs or Django templates.

Upvotes: 1

Related Questions