Question

这看起来很简单，但我无法弄清楚如何动态更改@eq条件。该示例显示了默认渲染，即卷曲，但我需要做的是接受用户输入，例如，单击一个按钮，然后将其更改为larry或moe。

请参阅我的jsfiddle http://jsfiddle.net/bodyrock/a7nmurnr/4/

从我所阅读的内容看来，我必须使用以下技术之一： - base.push到上下文 - makebase - 部分 - 内联参数 - 变量查找

<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}

尘埃js动态@eq条件

1 个答案: