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

我正在从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);
    });
});

$（函数（）{
//通过谷歌的API加载信息
$.getJSON（“https://www.googleapis.com/plus/v1/people/103039534797695934641/activities/public?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg“，功能（数据）{
//变量来保存我们将生成的HTML
var html=''；
//我们在页面上显示了多少帖子
var numberOfPosts=3；
//循环搜索结果，为每个
项生成HTML
对于（var i=0；i，回到我会做的那些日子：

<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>


{{title}}

{{published}}

//呈现模板（替换变量并返回html）
函数renderTemplate（tmpl，数据）{
用于（数据中的k）{
while（tmpl.indexOf（'{{'+k+'}}'）>-1）{
tmpl=tmpl.replace（'{{'+k+'}}'，data[k]）；
}
}
返回tmpl；
}
$（函数（）{
//我们的模板
var template=$（'#google posts container'）.html（）；
$（'#google posts容器'）.html（''）//或clear（）
$.getJSON（“https://www.googleapis.com/plus/v1/people/103039534797695934641"
+“/活动/公共”
+“maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg”，函数（数据）{
//变量来保存我们将生成的HTML
var html=''；
//我们在页面上显示了多少帖子
var numberOfPosts=3；
//循环搜索结果，为每个
项生成HTML
对于（var i=0；i关于“galchen”的评论，不要将angular.js用于严肃和（或）大型项目。只需查看源代码即可。
（无法添加子评论，这就是我写信给main branch的原因）
你的意思是想用占位符制作一个html模板，而不是用javascript连接html字符串吗？是的，类似的。不确定这与php有什么关系……如果你的意思是模板是php，你可以检索模板，然后为每篇文章使用模板为每篇文章生成一篇文章。听起来像你想要一个模板库…让火焰之战开始吧。我会用。但是你想要服务器端还是JS？你也可以用PHP调用API，创建一个模板文件，然后用变量解析它并输出数据。你可能应该解释一下，这叫做“微模板”让OP在一个好的Google搜索上领先一步。+1因为这是最简单的解决方案，不包括另一个单一的库。