CODEWITHSUNDEEP
javascripthtml
Kiran Nunna
Kiran Nunna

Reputation: 158

Custom or Reusable HTML component

Can we create custom or reusable components in HTML?

My page has account search functionality which is implemented using HTML, JS, jQuery code. And my page consists of account search at different places. (Functionality is same tough). Only ID of the div changes at each time we using it.

So can we come up with kind of components in HTML?

Again, Writing the code in separate file and including at different locations wont work as ID changes at each area. ID matter as we make call to server, get data and update the fields etc.

Upvotes: 3

Views: 14552

Answers (8)

Sujeet Mishra
Sujeet Mishra

Reputation: 11

There is a quite easy way to do so by using the core html WebAPI features.

class ReusableHeader extends HTMLElement {
  connectCallback() {
    const currenctDirectory = this.attributes.currDir.value;
    // Here you can access your attributes passed to the element

    this.template = `<div> 
      <p>No brother <p>
      <p> It should not be that much easy </p>
    </div>`
  }
}

customElements.define('my-header', ReusableHeader);

Ready to use

<my-header currDir="Home"></my-header>

The things you have to make sure before using it (keep it in header).

It should be defined first before using the element

The syntax is case sensitive so the element name should be like this () NO Capitals

ClassName should be like this ReusableHeader

Hope it works

Upvotes: 0

Wanderson Silva
Wanderson Silva

Reputation: 1199

Actually maybe you could use the separate js file, the implementation just needs to receive (maybe in the constructor, or if not a class, look up for a specific html tag) and use that required information when needed.

Upvotes: 1

Stan
Stan

Reputation: 53

If you use angularJS you can create a reusable html piece by making a separate html file with your component then calling it into your page as an element.

app.directive("elementName", function() {
  return {
    restrict: 'E',
    templateUrl: "/Path/To/Html.file"
  };
});

Then in every html page you want to use this component you just do the following:

<element-name></element-name>

Upvotes: 1

Kiran Nunna
Kiran Nunna

Reputation: 158

Following frameworks helps to solve the problem:

Mustache

HandleBars

I prefer to use HandleBar (which is written on top of Mustache).

Upvotes: 1

Sathya
Sathya

Reputation: 5308

Refer this blog post. It elaborates "how to create reusable components" using Handlebar.js. Definitely worth reading it.

Below code is enough to add datetimepicker in your app.

{{datetime "d1" "Start Date"}}

jsFiddle for this

Upvotes: 0

George Reith
George Reith

Reputation: 13476

Look into javascript templating. See mustache.js for one example.

e.g.

<script type="text/template" id="template">
   {{#elements}}
      <div id="{{id}}">
         {{content}}
      </div>
   {{/elements}}
</script>

And your JavaScript:

var view = {
   "elements": 
    [
       {
          id: "one",
          content: "Lorem ipsum dolor"
       },
       {
          id: "two",
          content: "Sit amet consectetur"
       }
    ]
}

var template = document.getElementById("template").innerHTML;
var output = Mustache.render(template, view);
console.log(output);

logs:

<div id="one">
   Lorem ipsum dolor
</div>
<div id="two">
   Sit amet consectetur
</div>

You can loop through objects, evaluate functions and insert them as text.

Upvotes: 6

dandavis
dandavis

Reputation: 16726

i love a good template engine, but you can use simple markup to decouple your logic from the html controls.

bootstrap does this using classes, and data- attributes work as well for more precise control.

you need to cleanup your code slightly; gather all the code you need, and detach all the refs to any given id. Usually, this is not difficult because you only have one or two spots that use the id, performing the rest of your operations using a variable.

wrap up all the code into one function that takes an element for it's only argument; this was formerly the one hard-coded to the id. move any IDs used in the code to classes or better yet, variables. change the css to reflect these classes and/or descendants of the widget class (more soon). at this point, you should be able to call the function and pass an element, and have it work. let's call it makeSearchFromElement().

function makeSearchFromElement(elm){
  elm.onchange=function(e){ alert("searching for " + elm.value); };
}

once you can do that, all you need is an easy way to define them. let's use a class of "widget-search" as an example. add the class to any html element that needs the search functionality in your package.

<input class='search widget-search validation' id=search123 type=search />

now, all you have to do is find all the declared widgets in the HTML and send them to the widget maker somewhere in a site-wide JS file :

[].slice
  .call(document.getElementsByClassName("widget-search"))
  .map(makeSearchFromElement);

if you don't inject at the bottom of the body tag, you'll want to place that last bit in a ready() or onload() event.

that's all you need to do to enable any input to have the demo "search" ability simply by adding a class to the HTML, not a single line of CSS or JS needed to add each one. It lets you patch or upgrade each one on the site from one spot, and it reduces the amound of custom code to be shipped over the wire, making the page load faster than hand-binding or even template-ing them.

Upvotes: 0

fotanus
fotanus

Reputation: 20116

HTML is a markup language, not a programming language. Most likely you are looking for a template engine like haml

Upvotes: 3

Related Questions