jQuery-模板的自定义HTML-奇怪的行为

Question

var $template;
$.get('/templates/searchTemplate.tmpl', function(HTMLres) {
    $template = $(HTMLres);
});
$.each(data.results, function(key, value) {
    $template.find('button').off().on('click', function() { console.log('you clicked me') });
    $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
    $template.find('.email').html(value.mail);
    $template.find('.phone').html(value.phone);
    $template.find('.age').html(value.age);
    $('#searchRsults').append($template);
});

When I try to use this code instead of having the template file to be Appended to the UL element, this will clear the previous append and append the next result to the UL element.

The template file is just a -> <LI> </LI> with some spans.

Note that if I put the | $.get (template) in the $.each part of the code everything works like it supposed to be all the <LI> </LI> element are appended one after another.

But doing so it makes a lot of request for the template file. On every iteration actually.

Even if I use the .DONE after the Ajax request still the result is the same the <LI> </LI> gets overwritten not appended

Answer 1

You should put the each() inside the success callback so the $template will be available, else you're trying to use the $template when it's not returned yet from the asynchronous HTTP (Ajax) request :

var $template;
$.get('/templates/searchTemplate.tmpl', function(HTMLres) {
    $template = $(HTMLres);

    $.each(data.results, function(key, value) {
        $template.find('button').off().on('click', function() { console.log('you clicked me') });
        $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
        $template.find('.email').html(value.mail);
        $template.find('.phone').html(value.phone);
        $template.find('.age').html(value.age);
        $('#searchRsults').append($template);
    });
});

Take a look to How do I return the response from an asynchronous call? .

Hope this helps.

Answer 2

function getResults(searchTerm){
           return $.get("/api/search", { 'searchFor': keyword });
        }

function getTemplate(){
            return $.get('/templates/searchTemplate.tmpl')
        }

$.when(getResults(keyword), getTemplate())
            .done(function(result1, result2){
                $('ul#searchRsults').empty();
                if (result1[0].results.indexOf('no results') != 0) {
                    $.each(result1[0].results, function(key, value) {

                        var $template = $(result2[0]);
                            $template.find('.img-avatar').html(img);
                            $template.find('button').off().on('click', function() { console.log('you clicked me') });
                            $template.find('.media-body > strong').html(value.firstname + ' ' + value.lastname);
                            $template.find('.email').html(value.mail);
                            $template.find('.phone').html(value.phone);
                            $template.find('.age').html(value.age);
                            $('#searchRsults').append($template);
                    });
            }
        })

after some read - I ended with this solution, in chrome console the request for template is made only once. Hope this helps sombady