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值。如何使用field中每个对象的columnDef属性在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值

1 个答案: