如何使用 DustJS 动态显示 JSON 值

Question

var data = {
  response: [
    { name: "Moe", age:  37,salary: 10000 },
    { name: "James", age:  31, salary: 12000 },
    { name: "Jan", age:  28, salary: 9000 },
    { name: "David", age:  29, salary:8500 }
  ]
};

var gridDef = {
  "data":data,
  "columnDef":[
    { "field":"name", "columnName":"Name" },
    { "field":"Age", "columnName":"Age" },
    { "field":"Salary", "columnName":"salary" }
  ]
}

var source = '<table id="dustGoals"> ' +
    '<thead> <tr> ' +
    '{#columnDef}' +
    '<th style="border:1px;background-color: cyan">{columnName}</th> ' +
    '{/columnDef} ' +
    '</tr> </thead> ' +
    '<tbody> {#data.response}' +
    '<tr>' +
      '{#columnDef}' +
        '<td>{eval(response[field])}</td>' + //field is "name","Age","salary" key and want to display values of response JSON array above.
      '{/columnDef}' +
    ' </tr> '+
    '</tbody>{/data.response}'+
    '</table>';

var compiled = dust.compile(source,"goalTemplate");
dust.loadSource(compiled);
dust.render("goalTemplate", gridDef,
function(err, out) {
  document.getElementById('dustPlaceholder').innerHTML = out;
});

我需要动态显示 data.response 值。如何使用 columnDef 中每个对象的 field 属性来显示 response 中的关联值？

在此示例中，columnDef 将使用 field 值 name、age 和 salary 循环三次。

Answer 1

此数据的格式对于 Dust 来说并不理想。因为 Dust 不会递归地渲染模板，所以您将不得不进行比其他情况下需要更多的迭代。理想的答案是重新格式化您的服务器发送的数据，以便所有相关字段都是同一对象的一部分。

例如，由于您要求动态显示字段，服务器数据实际上应该看起来更像：

[
  [ "Moe", 37, 10000 ],
  [ "James", 31, 12000 ],
  ...
]

然后您就可以遍历数组了。

如果你不能改变服务器的数据格式，你需要写一个context helper来扩展Dust。这是一种可能的解决方案，但您可以用多种方式编写它。

{
  fieldsFromColumnDef: function(chunk, context, bodies, params) {
    // Grab the fields we want to display
    var fields = context.resolve(params.columnDef).map(function(field) {
      return field.field;
    });

    // The current context will be a single item from results
    var row = context.current();

    // For each field name, render the body of the helper once with
    // the correct data
    fields.forEach(function(field) {
      chunk = chunk.render(bodies.block, context.push(row[field]));
    });

    return chunk;
  }
}

您的模板将如下所示：

{#data.response}
  <tr>
    {#fieldsFromColumnDef columnDef=columnDef}
      <td>{.}</td> <!-- the dot means "current context" -->
    {/fieldsFromColumnDef}
  </tr>
{/data.response}

最后，注意-- 您的 columnDef 示例是错误的！大写与字段名称不匹配，因此您会得到不正确的结果。一旦你解决了这个例子的问题，但我没有改变你的问题，因为那会改变它的意图。

如何使用 DustJS 动态显示 JSON 值

How to display JSON values dynamically using DustJS

javascript

json

dust.js