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);
});

当我尝试使用此代码而不是将模板文件附加到UL元素时，这将清除先前的附加并将下一个结果附加到UL元素。

模板文件只是一个 - ＆gt; <LI> </LI>有一些跨度。

请注意，如果我将| $.get (template)放在代码的$.each部分，那么所有<LI> </LI>元素的所有内容都会一个接一个地附加。

但这样做会对模板文件提出很多要求。实际上每次迭代。

即使我在Ajax请求之后使用.DONE仍然结果相同<LI> </LI>被覆盖而不是附加

Answer 1

您应该将each()置于成功回调中，以便$template可用，否则您在$template未返回时会尝试使用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); }); });但是来自异步HTTP（Ajax）请求：

simpleExample

查看 How do I return the response from an asynchronous call? 。

希望这有帮助。

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);
                    });
            }
        })

经过一些阅读 - 我结束了这个解决方案，在chrome控制台中，模板的请求只进行一次。希望这有助于sombady

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

2 个答案: