小鬍子 - 模板組織

我最近發現了小鬍子，並且通過在線閱讀所有文檔後，我仍然無法理解如何使用它。我不確定如何將我的HTML與我的模板文件分開，因爲我知道您將您的代碼包含在JavaScript文件中的變量中。小鬍子 - 模板組織

我正在創建一個網站，我希望有一個頁眉/頁腳功能。我轉向小鬍子做這個。

這是我當前模板：

template = " 
{{#head}} 
<!DOCTYPE html> 
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <script src = "extras/icomoon/lte-ie7.js"></script><![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<!--[if IE]> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/flexie/1.0.0/flexie.min.js"></script> 
    <script src="js/vendor/move.js"</script> 
<![endif]--> 
<head> 
    <meta charset="utf-8"> 

    <!-- Use the .htaccess and remove these lines to avoid edge case issues. 
     More info: h5bp.com/i/378 --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <title>{title}</title> 
    <meta name="description" content="{meta-description}"> 

    <!-- Mobile viewport optimized: h5bp.com/viewport --> 
    <meta name="viewport" content="width=device-width"> 

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons --> 
    <link href='http://fonts.googleapis.com/css?family=Erica+One|Ubuntu+Condensed|Open+Sans|Maven+Pro|Sans+Pro:300,400' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/base.css"> 
    <!-- <link rel="stylesheet/less" href="less/style.less"> --> 
    <link rel="stylesheet" href="css/animations.css"> 
    <link rel="stylesheet" href="css/typography.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/no-flexbox.css"> 

    <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> 
    <!-- <link type="text/css" rel="stylesheet" href="css/1140.css"> --> 
    <link type="text/css" rel="stylesheet" href="css/media-queries.css"> 
    <!-- todo: add font-awesome and icomoon--> 
    <link rel="stylesheet" href="extras/icomoon/style.css"> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script> 
    <script src="js/tests/tests.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/chosen.css"> 

    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips --> 

    <!-- All JavaScript at the bottom, except this Modernizr build. 
     Modernizr enables HTML5 elements & feature detects for optimal performance. 
     Create your own custom Modernizr build: www.modernizr.com/download/ --> 

</head> 
{{/head}} 
<body> 
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6. 
     chromium.org/developers/how-tos/chrome-frame-getting-started --> 
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--> 

    <!-- Add your site or application content here --> 
    <header id="main" class="main-menu loading"> 
     {{#logo}}<a href = "/index.html"><img src="img/logo.png" class="flash-hover"></img></a>{{/logo}} 
     {{#nav}}<nav id="nav-main" class="top-menu"> 
      <ul class = "top-nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="docs/about.html">About</a></li> 
       <li><a href="docs/features.html">Features</a></li> 
       <li><a href="docs/installation.html">Installation</a></li> 
       <li><a href="help-support/contact.html">Contact</a></li> 
      </ul> 
     </nav>{{/nav}} 
    </header> 
    <div id="ajaxloader1"></div> 
    <div id="main-content" role = "main" class = "loading"> 
    {{#top_a}} 
    <div id="top-a"> 
    {{content}} 
    </div>{{/top_a}} 
    {{#article}} 
    <article> 
    <hgroup> 
     <h1 class="article-header">{{header}}</h1> 
     <h2 class="subtitle">{{subtitle}}</h2> 
     </hgroup> 
     {{content}} 
    </article> 
    {{/article}} 

    {{#footer}} 
    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom --> 

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script> 

    <!-- scripts concatenated and minified via build script --> 
    <!-- <script src="js/plugins.js"></script> --> 
    <script src="js/loading.js"></script> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/hashgrid/6/hashgrid.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/store.js/1.1.1/store.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/kerning.js/0.2/kerning.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/2.1.04/jquery.masonry.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script> 
    <script src="extras/chosen/chosen.jquery.min.js"></script> 
    <!-- <script src="js/vendor/can.jquery.min.js"></script> --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.5.0-dev/mustache.min.js"></script> 
    <!-- <script src="js/vendor/can.fixture.js"></script> --> 
    <script src = "js/main.js"></script> 
    <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js" media = "@screen"></script> --> 
    <!-- end scripts --> 

    <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID. 
     mathiasbynens.be/notes/async-analytics-snippet --> 
    <!-- <script> 
     var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 
     (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 
     g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; 
     s.parentNode.insertBefore(g,s)}(document,'script')); 
    </script> --> 
</body> 
</html> 
{{/footer}} 

";

我得到的問題顯然是我需要逃避所有引號。所以我的問題是，從模板中分離所有這些標記的最好方法是什麼，這樣我仍然可以獲得我的語法突出顯示，就好像我在PHP中使用標準頁眉/頁腳函數執行內聯html一樣？

在此先感謝。

來源

2012-08-07 user1429980

在JS中沒有多行字符串，所以你不能只是把所有這些都放在JS字符串中，如果這是應該的。通常我會建議也許把它在一個<script>元素是這樣的：

<script type="text/x-mustache-template"> 

{{#head}} 
<!DOCTYPE html> 

... 

</script>

但因爲你有你的模板<script>標籤，這並非如此簡單。您最好的選擇可能是將模板放在它自己的文件中，然後用PHP將它拖入頁面中，如下所示：

<?php 

$templates = array(); 

$template[ 'whatever' ] = file_get_contents("template.mustache"); 

?> 

<script> 

var templates = <?php echo json_encode($templates); ?>; 

</script>

來源

2012-08-07 23:51:12 JMM

非常感謝。不幸的是，PHP目前不是一種選擇。你能否提供一個如何在javascript中使用mustache.js來做到這一點的例子？ – user1429980 2012-08-08 00:00:24

是否可以將模板存儲在單獨的文件中並通過ajax將其拉入？如果不是，那麼最可讀的東西可能是將它放在''結束標籤。我不確定是否有更合理的方法來實現這個目標，所以暫時我建議用一個mustache變量替換它的一部分，該變量將評估爲空字符串或部分實際值結束標籤，例如''{script}>'，或'''{{script}}'迴響「腳本」。 – JMM 2012-08-08 00:25:11

再次感謝。我對ajax方法感興趣，而且我已經做了一些搜索，但我仍然感到困惑。使用這種方法，我是否需要使用現有模板（減去''var template =''），並將其存儲在名爲''template.mustache''的文件中......還是隻適用於partials？我知道如何在jQuery中進行ajax調用，所以我真正關心的是組織。我可以調用''Mustache.to_html（template，data）''函數從文件中獲取呈現的html ...是最好的解決方案嗎？ – user1429980 2012-08-08 23:41:50

小鬍子 - 模板組織

回答

相關問題