CODEWITHSUNDEEP
javascriptjqueryhtml
Alaa Jabre
Alaa Jabre

Reputation: 1883

how to use html script template correctly

I have to generate some li element automatically and the way I was doing it it through a function that return text inside a loop, something like this:

function getLi(data) {
   return '<li>' + data + '</li>';
}

then I found a better way to do it by writing html inside a div:

<div style="display:none;" id="Template">
   <li id="value"></li>
</div>

and then I would change the id and value get the html and reset the element to original state:

var element = $("#value");
element.html(data);
element.attr('id', getNewId());
var htmlText = $("#Template").html();
element.html('');
element.attr('id', 'value');
return htmlText;

then I was reading on script template

and I figured this could be a better way of doing it,
However apply the previous code didn't work as the inner elements didn't exist according to this article

so how can I apply this?

EDIT: I put inside a ul tag, I use this method to get the items dynamically

EDIT2: 

<li>
   <a href="#" >
   <span>
   <span>
some text
   </span>
   </span>
</li>

this isn't necessarily what I have but something along the way

Edit3: my ul does not exist orgialy it's generated dynamically I insist this is not a duplicate I want to know how to use a template with some dynamic variables

Upvotes: 0

Views: 270

Answers (5)

rramiii
rramiii

Reputation: 1186

What you need is jQuery templates, you can use this link which is a good one that I'm using.

You create your template and prepare your JSON object of data. After that things will be ready in one function call.

Upvotes: 0

Pintu Patel
Pintu Patel

Reputation: 1

Try this...

function getLi(data,ID) {
   return $('<li id = "'+ ID + '">' + data + '</li>');
}

It returns javascript objest of Li..and you append it where ever you need.

Upvotes: 0

Louay Alakkad
Louay Alakkad

Reputation: 7408

If you're going to repeat this, use a templating system. Like {{ mustache }} or Handlebars.js.

If not, you can do this.

<ul>
  <li class="hidden"></li>
</ul>

And in Javascript

$('ul .hidden').clone().removeClass('hidden').appendTo('ul');

And CSS, of course

.hidden { display:none }

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

You could do the following way. It's clean, reusable and readable.

//A function that would return an item object
function buildItem(content, id) {

    return $("<li/>", {
        id: id,
        html: content
    });
}

In your loop, you could do the following. Do not append each LI inside the loop as DOM manipulation is costly. Hence, generate each item and stack up an object like below.

var $items = $();
// loop begin
var contents = ['<a href="#"><span><span>', data, '</span></span></a>'].join('');
var $item = buildItem(contents, getNewId());
$items.add($item);
// loop end

Just outside the loop. append those generated LIs to the desired UL, like below.

$("ul").append($items);

This is what I'd do and I am sure there are many better ways. Hope that helps.

Upvotes: 2

cchamberlain
cchamberlain

Reputation: 17956

One option is to upgrade to a modern JavaScript framework like AngularJS and then you could do it in one line using ng-repeat.

This would serve your purpose and make you more money as a developer.

Upvotes: 1

Related Questions