Javascript Mustache-渲染变量值

我有两个html主页和大约主页，页面顶部定义了一个js变量：

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

我想把它传递给mustache，并输出与mustache键相关的值。基本上，json有一个所有页面标题的列表，我想提取与动态pageAlias匹配的页面标题。但不是为我工作。以下是我所拥有的：

每个html页面中包含的pageHeading.js：

// 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.json和page_heading.mustache.html mustache.html这两个页面，这两个页面都可以重用。在这里，我们将json插入到mustache模板中，还添加了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
}

现在的问题是，小胡子无法获取pageAlias值home，在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？

您试图访问的是pageHeading[pageAlias]，这是Mustach无法实现的。您应该尝试以下方法：

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

---

为什么不在JS端设置标题，而不是在模板端进行复杂的查找？只要设置{title:whatever}并扔掉pageAlias，如果我必须向json中添加更多的数据来拉入mustache，比如在{{{title}}后面加一个{{{{{{subTitle}}}意味着templateData需要能够保存额外的字段以在mustache中呈现它们，而不仅仅是标题。我不知道如何让它在mustache中使用多个变量+我尝试的pageAlias技术。我不得不这样调用它：var templateData=templateData.pageHeading[pageAlias]；这很好，回答了问题谢谢！