如何使用DustJS动态显示JSON值

How to display JSON values dynamically using DustJS

本文关键字：JSON 动态显示 DustJS 何使用      更新时间：2023-09-26
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;
});

我需要显示数据。动态响应值。如何使用columnDef中每个对象的field属性来显示response中相关的值?

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

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

例如，由于需要动态显示字段，服务器数据应该看起来更像: 
[
  [ "Moe", 37, 10000 ],
  [ "James", 31, 12000 ],
  ...
]

这样你就可以迭代数组了。

如果不能更改服务器的数据格式，则需要编写上下文帮助程序来扩展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示例是错误的!大小写与字段名不匹配，因此您将得到不正确的结果。一旦你修复了这个例子的工作，但我没有改变你的问题，因为这会改变它的意图。

相关文章：