在Dust js上循环以遍历数组

时间:2018-12-12 09:11:01

标签: javascript php jquery dust.js

我要遍历数组file_url和file_name,这种方式有效:

                     <div class="u-cf">
                        <a href="{Api.file_url[0]}">{Api.file_name[0]}</a> <br>
                        <a href="{Api.file_url[1]}">{Api.file_name[1]}</a> 
                 </div> 

但是我需要这个来完成循环

      {#Api.file_name}
       {#.}

        <a href="{$file_url}">{$file_name}</a>{.} <br>

      {/.}
      {/Api.file_name}

我需要这样做,但它仅显示file_name,因为它引用了Api.file_name,如果我执行Api.file_url,则它仅显示url。我想给他们看

1 个答案:

答案 0 :(得分:0)

希望您的数据如下所示:

{
   names: ["file_name0", "file_name1"],
   url: ["http://www.dustjs.com/", "http://www.google.com/"]
}

您需要帮助者才能在同一元素上加载两个不同的数据,如下所示:

var base = '{#names}\
<a href={#loadSecondArray i=$idx}{ele}{/loadSecondArray}> {.} </a><br/>\{~n}\
{/names}'

var baseCompiled = dust.compile(base, 'base');
dust.loadSource(baseCompiled);
var jsonData = {
    names: ["file_name0", "file_name1"],
    url: ["http://www.dustjs.com/", "http://www.google.com/"],
    loadSecondArray: function (c,ctx,b,p) {
        var array2 = ctx.get('url');
        var ele = array2[p.i]
        var ctx_new = dust.makeBase({
            ele:ele
        })
c.render(b.block, ctx_new)
    }
}
var result = '';
dust.render('base', jsonData, function (err, out) {
    result = out;
});

document.querySelector("#container").innerHTML = result;

working fiddle