小胡子 - 渲染变量值

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