【问题标题】：multiple handlebars template conflicting多个车把模板冲突
【发布时间】：2014-01-11 07:32:00
【问题描述】：

我有 2 个 ajax 调用（一个用于获取标题内容，一个用于获取图像内容）。两者都以 JSON 格式返回。要渲染，我有 2 个车把模板。

问题是：仅渲染了一个车把模板（有时会渲染标题，有时会渲染图像）。网址： http://www.devfolio.info/ankit/index.php

代码： JS文件

function getPhotos(uid){
    var dataString = 'action=viewPhotobank&uid=' + uid;
    $.ajax({
        type:"POST",
        url: "/themesAssets/controller/actions.php",
        data: dataString,
        success: function(msg){
            response = JSON.parse(msg);
            if(response.statusPhotos == "success"){
                if(typeof(afterGetUserphotobank) != 'undefined'){
                    afterGetUserphotobank();
                } else{
                    var sourcePhotos   = $("#images-template").html();
                    var templatePhotos = Handlebars.compile(sourcePhotos);
                    $("#content").fadeOut(animationTime, function(){
                        $("#content").html(templatePhotos(response))
                        .fadeIn(animationTime);
                    });
                }
            }
        }
    });
}

function getHeaderData(uid){
    var dataString = 'action=getHeader&uid=' + uid;
    $.ajax({
        type:"POST",
        url: "/themesAssets/controller/actions.php",
        data: dataString,
        success: function(msg){
            response = JSON.parse(msg);
            if(response.statusHeader == "success"){
                if(typeof(afterGetSingleImage) != 'undefined'){
                    afterGetHeaderData();
                } else{
                    var sourceHeader   = $("#header-template").html();
                    var templateHeader = Handlebars.compile(sourceHeader);
                    $("#header").fadeOut(animationTime, function(){
                        $("#header").html(templateHeader(response))
                        .fadeIn(animationTime);
                    });
                }
            }
        }
    });
}

在主页上：

<body>
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
        <script>
            $(document).ready(function(){
                getHeaderData(<?= $uid ?>);
                getPhotos(<?=$uid?>);
            });
        </script>
        <?php
        require_once $rootFolder . '/themes/classy/headerTemplate.php';
        require_once $rootFolder . '/themes/classy/imagesTemplate.php';
        ?>
</body>


<?php
require_once '../../global.php';
require_once $rootFolder . '/classes/portfoliodata.class.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php
        $data = new portfolioData();
        $data->getViewport();
        $data->getCharset();
        $data->getCommonCSS();
        $data->getCommonJS();
        $data->getThemeCSS("classy", "grid");
        ?>
    </head>
    <body>
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
        <?php
        require_once $rootFolder . '/themes/classy/headerTemplate.php';
        require_once $rootFolder . '/themes/classy/singleImageTemplate.php';
        require_once $rootFolder . '/themes/classy/imagesTemplate.php';
        ?>
        <script>
            $(document).ready(function(){
                getHeaderData(<?= $uid ?>);
                getPhotos(<?= $uid ?>);
            });
        </script>
    </body>
</html>

【问题讨论】：

您需要发布代码，向我们展示您尝试过的内容，具体失败的地方等。可能会制作一个 JSFiddle 以直观地向我们展示我们可以编辑的内容。
类似问题（答案很广泛，但解释了为什么这种情况发生得比我好）stackoverflow.com/questions/19084299/…
另外一个相关的情况，这个描述了PHP和HTTP/1.1是如何背后的。 stackoverflow.com/questions/898190/…

标签： jquery handlebars.js

【解决方案1】：

编辑

它使用来自赢得比赛的任何 AJAX 调用的相同缓存响应。

把这个放在你的$.ajax(); 调用中（所有的）就在data:之前

cache: false,

如果这不能让你快速解决问题，那我就去睡觉了。永远。

这不会让您摆脱将所有这些都加入到一个电话中。只是希望您了解问题的原因并从中学习。事实上，这段代码需要稍微改造一下，一些聚合，当然还有popstates。

如果 Handlebars 不能满足您的需求，我强烈建议您使用 Angular.js。本质上相同的想法，但作为元素、属性等直接集成到 HTML 中。

这些 AJAX 调用是异步的——它们不关心其他调用何时加载，它们只是在加载时加载。

您可以通过以下任一方式防止这种情况：

在一个 AJAX 调用中（逻辑上）用 both things 响应并使用 success: function() { 显示结果

或

您可以按照您希望它们加载的顺序将一个调用嵌入到另一个success: 中。

我不推荐第二种选择。

【讨论】：

是的，所以这些 AJAX 调用是异步的，那么为什么它一次只渲染一个模板呢？我返回了 2 个不同的 JSON，两个不同的模板，所有变量名都不同（只是为了确定），那么为什么只有一个车把模板被渲染而其他不是？现场演示：devfolio.info/ankit/index.php
你能发布相应的 PHP 以显示正在发送什么响应以及如何发送
这是返回的 JSON，我是从 firebug 那里得到的：{"statusHeader":"success","messageHeader":{"userConfig":{"footer":"Copyright @ Ankit Mahanot","title":"Ankit Mahanot Portfolio","titleAsLogo":"yes"},"userLogo":{"logoPath":"datastore\/ankit\/logo\/logo.jpg"},"userPages":[{"id":32,"title":"Another page ok?","content":"<p>0<\/p>","publish":1,"pos":0},{"id":36,"title":"new page","content":"0","publish":0,"pos":0}],"layout":[{"theme":"grid"}]}}
第二个 JSON 很大，但这里有一部分：{"statusPhotos":"success","messagePhotos":[{"id":553,"fileName":"Lion_image_11_1380737515.jpg","geotag":"","pictitle":"Lion","picdesc":"The lion is one of the four big cats in the genus Panthera and a member of the family Felidae. With some males exceeding 250 kg in weight, it is the second-largest living cat after the tiger.","picidea":"","catid":0,"pos":2,"featured":1}
我应该能够使用 JSON，但第二个被截断了。你能去jsonmate.com粘贴它并在此处发布永久链接

~~~~~~编辑~~~~~~

我不推荐第二种选择。

编辑