小鬍子 - 渲染變量值

Question

我有在頁面的頂部定義一個js變量兩個HTML頁面home和about：

var pageAlias = 'home'; // on the home page 
var pageAlias = 'about'; // on the about page 

我想傳遞給小鬍子，和輸出值與鬍子鍵關聯。基本上，json有一個所有頁面標題的列表，我想拉動與動態pageAlias匹配的頁面標題。但不爲我工作。以下是我有：

pageHeading.js（包括在每一個HTML頁面）：

// Page Heading 
$.getJSON('page_heading.json', {}, function(templateData, textStatus, jqXHr) { 
var templateHolder = $('#page_heading_template_holder'); 

// defined on every page as a var on the very top 
// to pull in page title from Alias, so we can call it in mustache 
var pageHeadingData = { "pageAlias" : pageAlias} 

// merge pageAlias with json data 
var templateData = $.extend(templateData, pageHeadingData); 

$.get('page_heading.mustache.html', function(template, textStatus, jqXhr) { 
    templateHolder.append(Mustache.render($(template).filter('#page_heading_template').html(), templateData)); 
    }); 
}); 

這讓我們既渲染和page_heading.jsonpage_heading.mustache.html（mustache.html）是外部鬍子文件，被重用由兩頁。在這裏，我們將json插入小鬍子模板，並且還添加var pageHeadingData = { "pageAlias" : pageAlias}並將其與原始加載的json合併。

page_heading.json（如圖中合併後的頁面別名）

{ 
    "pageHeading": { 
     "home": { 
      "title" : "Welcome to our website!" 
     }, 
     "about": { 
      "title" : "Where we came from." 
     } 
    }, 
    "pageAlias" : "home" //merged dynamically from .js to get pageAlias 
} 

現在的問題是不能夠採取的頁面別名值，家居，pageHeading下找到它，並呈現出標題鬍子：

page_heading.mustache.html（工作）

// This works and pulls the title, but is not dynamic 
<script id="page_heading_template" type="text/html"> 

    <div class="page-heading"> 
     {{#pageHeading.home}} 
      <h1>{{{title}}}</h1> 
     {{/pageHeading.home}} 
    </div> 

</script> 

page_heading.mustache.html（不工作 - 在這一個需要幫助的）

// This does not work, pageAlias is taken literally and mustache looks for it 
// in json not it's value, 'home', so the title is never returned 
<script id="page_heading_template" type="text/html"> 

    <div class="page-heading"> 
     {{#pageHeading.pageAlias}} 
      <h1>{{{title}}}</h1> 
     {{/pageHeading.pageAlias}} 
    </div> 

</script> 

我該如何做到這一點，獲取pageAlias動態值，渲染出相應的pageHeading？

Answer 1

你試圖訪問的是pageHeading[pageAlias]，這是鬍鬚根本無法做到的。你應該嘗試這樣的方法：

<script id="page_heading_template" type="text/html"> 
    <div class="page-heading"> 
    <h1>{{{title}}}</h1> 
    <h2>{{{subtitle}}}</h1> 
    <div> 
</script> 


{ 
    home: {title: 'Welcome...', subtitle: 'yay, you made it!'}, 
    about: {title: 'Where we came from', subtitle: 'and where we did not come from'} 
} 


var pageAlias = 'home'; 
// get the 'sub-object' instead of merging 
// so that templateData looks like this: 
// {title: 'Welcome to our website!', subttile: 'yay, you made it!'} 
var templateData = pageHeading[pageAlias];