CODEWITHSUNDEEP
jqueryhtml
DarthVader
DarthVader

Reputation: 55022

Cleaner way of appending html to an element

I m working on a infinite scroll as follows:

<script type="text/javascript">
    $(function () {
        var page = 1;
        var $ol = $('#namesList');
        var $waypoint = $('#namesWaypoint');

        var opts = { offset: '100%' };
        $waypoint.waypoint(function () {
            console.log('waypoint triggered');
            $waypoint.waypoint('remove');
            $.get('/Home/AjaxPage?page=' + page++, function (data) {
                data.names.forEach(function (name) {
                    $ol.append($('<li class="span3" style="margin-bottom: 0 !important;">').text(name));
                });
                $waypoint.waypoint(opts);
            });
        }, { offset: '100%' });
    });
</script>

See this line :

 $ol.append($('<li class="span3" style="margin-bottom: 0 !important;">').text(THEFOLLOWINGCODEBLOCK));

I need to append the following there : 

<li class="span3" style="margin-bottom: 0 !important;">
                <div class="thumbnail">
                    <div>
                        <a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">
                            <img src="@item.MainImage.Path?width=260&height=150" alt=""></a><br />
                        <strong class="other_news"><a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">@Html.Truncate((string)item.Title, 30)</a></strong>
                        <br />
                        <span class="detail_content">@Html.Truncate((string)item.PreviewText, 75)</span>
                        <br />
                        <span class="detail_content">@item.DatePublished.ToString("dd/MM/yyyy")</span>
                    </div>
                </div>
            </li>

is there a cleaner way of doing this?

should i use jquery tmpl? i dont want to bring in lot of scripts...

Upvotes: 1

Views: 184

Answers (2)

Ben Barkay
Ben Barkay

Reputation: 5622

You could do the following, for instance:

$('<li></li>')
    .addClass('span3')
    .css({
        'margin-bottom' : '0',
        'more-css' : 'can-be-placed-here'
    })
    // Use either append or html, depending on your circumstance
    .append(YOUR_ELEMENT)
    .html(YOUR_CODE_STRING)
    .appendTo($ol);

Or as you mentioned, use some sort of templating engine such as jQuery.tmpl.

Unfortunately, there are no means to perform this cleaner in JS. You should do what you evaluate as most readable and understandable for each case. Above I simply made it more readable by indentation and breaking each instruction to its own line.

As far as templating without an engine goes, you could append the following to your HTML document:

<script id="myTemplate" type="text/template">
    <div class="thumbnail">
        <div>
            <a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">
                <img src="@item.MainImage.Path?width=260&height=150" alt=""></a><br />
            <strong class="other_news"><a href="/Haberler/@item.Id/@Html.URLFriendly((string)@item.Title)">@Html.Truncate((string)item.Title, 30)</a></strong>
            <br />
            <span class="detail_content">@Html.Truncate((string)item.PreviewText, 75)</span>
            <br />
            <span class="detail_content">@item.DatePublished.ToString("dd/MM/yyyy")</span>
        </div>
    </div>
</script>

And then use it to generate a new element using that markup, like so:

var $tpl = $($('#myTemplate').html());
$tpl.find('.detail_content').text('Hai der');
$listItem.append($tpl);

Upvotes: 2

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

It is not a much cleaner way, but I can suggest a little faster way:

var content = '';
data.names.forEach(function (name) {
    content += '<li class="span3" style="margin-bottom: 0 !important;">' + name + '</li>';
});
$ol.append($(content)); // Call append only once

Upvotes: 1

Related Questions