javascript - dust js动态@eq条件

Question

这看起来很简单，但我只是不知道如何动态更改 @eq 条件。该示例显示了默认渲染，即 curly，但我需要做的是接受用户输入，例如单击按钮，并将其更改为 larry 或 moe。

查看我的jsfiddle http://jsfiddle.net/bodyrock/a7nmurnr/4/

从我读到的内容来看，我必须使用以下技术之一:- base.push 到上下文中- 制作基地- 部分- 内联参数- 变量查找

<script type="javascript">
$(document).ready(function () {
var data = {
    "title": "Famous People", 
    "names" : [{ "name": "Larry", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}] },{ "name": "Curly", "props":[{"name":"height","value":"5.9"},{"name":"weight","value":"200"}]},{ "name": "Moe", "props":[{"name":"height","value":"5.8"},{"name":"weight","value":"160"}]}]
}

var source   = $("#entry-template").html();
var compiled = dust.compile(source, "intro");
dust.loadSource(compiled);

dust.render("intro", data, function(err, out) {
    $("#output").html(out);
});
});
</script>

<script id="entry-template">
{title}
<ul>
{#names}
    {@eq key=name value="Curly"}
    <li>      
      {name}
      <ul><li>Weight: {#props}{@eq key=name value="weight"}{value}{/eq} {/props}</li></ul>      
    </li>
    {/eq}
{/names}
</ul>
</script>
<input type="button" value="moe" onclick="alert('change to moe');"><input type="button" value="larry" onclick="alert('change to larry');"><input type="button" value="curly" onclick="alert('change to curly');">
<div id="output"></div>

Answer 1

您只需使用包含有关您要显示的人员的信息的新上下文重新呈现模板。

JSFiddle

$('input').on('click', function() {
    var ctx = dust.makeBase({ currentName: $(this).val() }).push(data);
    dust.render("intro", ctx, function(err, out) {
        $("#output").html(out);
    });
}).first().click();

和

{#names}
    {@eq key=name value=currentName}
    <li>      
      {name}
      <ul><li>Weight: {#props}{@eq key=name value="weight"}{value}{/eq}{/props}</li></ul>      
    </li>
    {/eq}
{/names}