Question

我正在从Google的API中检索一些信息并将它们放在一个变量中，然后将它们插入DOM中的div，如下所示：

$(function() {
    // Load the info via Google's 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。

Answer 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

Answer 2

关于'galchen'的评论 - 不要将angular.js用于严肃的和（或）大型项目。只需看看源代码。（不能添加子评论，这就是我写给主分支的原因）

在PHP页面上显示JS的另一种方法？

2 个答案: