Еще один способ отображения JS на странице PHP?

0

Я извлекаю некоторую информацию из Google API и помещаю их в одну переменную, а затем вставляю их в div в DOM, например:

$(function() {
    // Load the info via Google API
    $.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641/activities/public?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {

        // Variable to hold the HTML we'll generate
        var html = '';
        // how many posts we're displaying on the page
        var numberOfPosts = 3;

        // Loop over the results, generating the HTML for each <li> item
        for (var i=0; i<numberOfPosts; i++) {
            html += '<article>';
            html += '<img src="'+data.items[i].actor.image.url+'">';
            html += '<p>'+data.items[i].title+'</p>';
            html += '<p>'+data.items[i].published+'</p>';
            html += '</article>';
        }

        // Insert the generated HTML to the DOM
        $('.google-posts-container').html(html);
    });
});

Мой вопрос: есть ли способ хранить каждую часть информации в каждой из ее собственной переменной, а затем получать информацию по отдельности, повторяя эту переменную? Поэтому мне не нужно жестко кодировать весь этот HTML.

  • 0
    Вы имеете в виду, что вы хотите сделать шаблон HTML с заполнителями вместо конкатенации строк HTML с использованием JavaScript?
  • 0
    Да что-то подобное.
Показать ещё 3 комментария
Теги:

2 ответа

1

в те дни, когда я буду делать:

<div id="google-posts-container">
    <article>
        <img src="{{image}}">
        <p>{{title}}</p>
        <p>{{published}}</p>
    </article>
</div>

<script type="text/javascript">
// render a template (replace variables and return html)
function renderTemplate(tmpl, data){
    for (k in data){
        while(tmpl.indexOf('{{'+k+'}}') > -1){
            tmpl = tmpl.replace('{{'+k+'}}', data[k]);
        }
    }
    return tmpl;
}
$(function(){
    // our template
    var template = $('#google-posts-container').html();
    $('#google-posts-container').html(''); // or clear()

    $.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641"
        +"/activities/public"
        +"?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {
        // Variable to hold the HTML we'll generate
        var html = '';
        // how many posts we're displaying on the page
        var numberOfPosts = 3;

        // Loop over the results, generating the HTML for each <li> item
        for (var i=0; i<numberOfPosts; i++) {
            html += renderTemplate(template, {
                image : data.items[i].actor.image.url,
                title : data.items[i].title,
                publish : data.items[i].published
            });
        }

        // Insert the generated HTML to the DOM
        $('.google-posts-container').html(html);
    });

});
</script>

в настоящее время я использую angularjs

Поделиться
  • 0
    Вы, вероятно, должны объяснить, что это называется «микро-шаблонизацией», чтобы дать OP возможность начать хороший поиск в Google. +1, потому что это самое простое решение без включения еще одной монолитной библиотеки.
0

О комментариях 'galchen' - не используйте angular.js для серьезных и (или) больших проектов. Просто посмотрите исходный код. (не могу добавить дополнительный комментарий, вот почему я написал основную ветку)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню