javascript - mustache .js : large JSON dictionary & smaller know list of entries to display randomly onfly?

Question

我刚刚开始使用mustache.js，我有我的json字典、我的html模板和我的mustache.js启动代码来注入(inject)整个内容。我的 html-mustache 模板是这样的:

<script id="tpl" type="text/html">
    <div class="body">
        <p>{{口.zht}}</p>
        <p>{{口.sam.pyn}}</p>
        <p>{{口.sam.fra}}</p>
    </div>
</script>

在我的测试用例中，使用给定的现有条目“口”，它可以工作( 1 )。但我注意到 Mustache 似乎旨在迭代所有 JSON 条目。但是，我想处理一个小的 focusList 条目

var focusList = ['們','火山口','火'];

我想从较大的(~1000 个条目)JSON 字典中选择相应的数据。

如何根据我的 focusList 更改或创建变量 {{#口}} 和 {{/口}}，以便我可以使用正确的数据打印我的模板？

模板中是否有某些类型的变量，例如:

<script id="tpl" type="text/html">
    <div class="body">
        <p>{{{{entry}}.zht}}</p>
        <p>{{{{entry}}.sam.pyn}}</p>
        <p>{{{{entry}}.sam.fra}}</p>
    </div>
</script>

并在 JS 中添加:

var entry = focusList[Math.floor(Math.random() * focusList.length)]]

？

Answer 1

解决方案:给定一个小的键列表，从较大的 JSON 数据中打印相关条目:

//1. Suggest a smaller custom list of keys existing in the larger data. 2. Randomize.
var focusList = ['們','火山口','火'];
var randomKey = focusList[Math.floor(Math.random() * focusList.length)];
//3. variable + Template + variable. 4. printing.
var template = ('{{#'+ randomKey +'}}'+ $('#tpl').html() +'{{/'+randomKey+'}}'); // as {{#火}} ... {{/火}}
var output = Mustache.render(template, myBigJSON);
$('#main').append(output)

替代方案 1: 您还可以使用 Object.keys ( 2 ) 获取整个条目列表，从整个列表中打印随机条目:

//1. Get and create the list of all keys
var focusList = Object.keys(myBigJSON);

最后，您可以shuffle the given list，而不是可能重复某些条目的随机化和循环。和 iterate the shuffled list systematically系统地打印每个项目。