從外部html文件中加載handlebars.js模板不會顯示任何內容

我會盡量按順序解釋這一點，但是這對我的js技能有一點點的延伸，所以我可以將它解釋爲一個白癡。從外部html文件中加載handlebars.js模板不會顯示任何內容

這裏是我的JavaScript來從服務器獲取的JSON，並嘗試將其推入模板：

//Server Interface Start 
//Access the web api for The User: 
var lucidServer = (function() { 
    //global error handler 
    $(document).ajaxError(function (event, xhr) { 
     alert(xhr.status + " : " + xhr.statusText); 
    }); 
    //client Calls 
    var getClients = function (id) { 
     return $.ajax(clientUrl + "/list/" + id) 
    }; 
    var getClient = function (id) { 
     return $.ajax(clientUrl + "/details/" + id) 
    }; 

    //push them out to the world! 
    return { 
     getClients: getClients, 
     getClient: getClient, 
    }; 
}()); 
//Server Interface End 

(function() { 
    //list of clients 
    var refreshClients = function() { 
     lucidServer.getClients(1).done(showAllClients); 
    }; 
    var showAllClients = function (templateInput) { 
     var source; 
     var template; 
     var path = '../Templates/indexTemplates.html' 
     $.ajax({ 
      url: path, 
      cache: true, 
      success: function (data) { 
       source = data; 
       template = Handlebars.compile(source); 
       $('#clientListOutput').html(template(templateInput)); 
      } 
     }); 
    }; 
    $(function() { 
     refreshClients(); 
    }); 
}());

GetClients工作正常，並返回JSON數據，我期待的。當我注意到templateInput時，它顯示了我的期望。

這裏是外部的模板：

<script id="clientList" type="text/html"> 

<div id="clients"> 
    {{#each client}} 
       <span data-id="{{this.iD}}" /> 
    <div> 
     <p>{{this.iD}}</p> 
     <p>{{this.name}}</p> 
    </div> 
    {{/each}} 
</div> 
</script>

什麼，我最終的目標是什麼是持有要麼我在一個HTML文件中的所有模板，我可以通過腳本顯示來電，或有每個模板是它自己的文件我可以打電話。當我運行該頁面沒有什麼顯示出來，沒有錯誤或任何東西。這裏是整個索引頁：

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> 
<html class="no-js"> 
<!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width" /> 
    <link rel="stylesheet" href="../../Content/normalize.css"> 
    <link rel="stylesheet" href="../../Content/main.css"> 
    <script src="../../scripts/libs/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 
    <!--[if lt IE 7]> 
      <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> 
     <![endif]--> 
    <section id="Application"> 
     <div id="clientListOutput"> 
     </div> 
     <div id="clientCreateOutput"> 
     </div> 
    </section> 
    <footer> 
    </footer> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../scripts/libs/jquery-1.8.2.min.js"><\/script>')</script> 
    <script src="../../scripts/plugins.js"></script> 
    <script src="../../scripts/main.js"></script> 
    <script type="text/javascript" src="../../Scripts/libs/handlebars.js"></script> 
    <script> 
     var freelancerUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Freelancer"})'; 
     var clientUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client"})'; 
     var projectUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Project"})'; 
     var storyUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Story"})'; 
    </script> 
    <script type="text/javascript" src="../../Scripts/serverInterface.js"></script> 
</body> 
</html>

編輯：我改變了我的模板稍微的樣子。通過在chrome工具中調試js，它告訴我''data'在showallclients中的ajax成功行中是未定義的。

幫助！

來源

2012-10-25 ledgeJumper

您需要使用從getClient返回的數據調用模板。在你的例子中，showAllClients的參數被成功回調中的參數隱藏，因爲你使用了相同的名字（數據）。將showAllClients中的參數名稱更改爲其他名稱，並將其傳遞給模板函數。

(function() { 

     //list of clients 
     var refreshClients = function() { 
      $.when(lucidServer.getClients(1)).done(showAllClients); 
     }; 
     var showAllClients = function (templateInput) { 
      var source; 
      var template; 
      var path = 'Templates/indexTemplates.html' 
      $.ajax({ 
       url: path, 
       cache: true, 
       success: function (data) { 
        source = data; 
        template = Handlebars.compile(source); 
        $('#clientListOutput').html(template(templateInput)); 
       } 
      }); 
     }; 

     $(function() { 

      refreshClients(); 
     }); 
    }());

編輯：

在您需要參考this各區塊內的模板：

<div id="clients"> 
    {{#each client}} 
       <span data-id="{{this.id}}"> 
        <div> 
         <p>{{this.iD}}</p> 
         <p>{{this.name}}</p> 
        ... 
        </div> 
     {{/each}} 
</div>

在你的榜樣，你使用嵌套迭代器，這我不知道支持。請閱讀How do I use nested iterators with Mustache.js or Handlebars.js?或Ember.js/Handlebars nested each iterations以瞭解其他方法。

來源

2012-10-25 18:54:24 ebaxt

這給了我這個錯誤：ReferenceError：templateInput未定義 – ledgeJumper

您可能需要將調用包裝到lucidServer中，參見上文的編輯和http://api.jquery.com/jQuery.when/ – ebaxt

當然，這很有道理。但它仍然沒有渲染任何東西。有任何想法嗎？ – ledgeJumper

從外部html文件中加載handlebars.js模板不會顯示任何內容

回答

相關問題