Question

我目前正在寻找具有特定功能的JS模板语言。许多JS模板语言（如把手和灰尘）允许您迭代集合中的项目或直接指定路径，但我还想获取数据的完整路径。

例如，如果给我以下数据： -

{
  people: [
    {firstName: "Test", lastName: "One"},
    {firstName: "John", lastName: "Smith"}
  ]
}

我想创建一个这样的模板： -

<div id="people">
  {{#each people}}
    <div>
      <span data-path="<<<PATH SYNTAX FOR firstName>>>">{{firstName}}</span>
      <span data-path""<<<PATH SYNTAX FOR lastName>>>"">{{lastName}}</span>
    </div>
  {{/each}}
</div>

哪会给我这个： -

<div id="people">
   <div>
      <span data-path="people[0].firstName">Test</span>
      <span data-path="people[0].lastName">One</span> 
   </div>
   <div>
      <span data-path="people[1].firstName">John</span>
      <span data-path="people[1].lastName">Smith</span> 
   </div>
</div>

这甚至可能吗？我更喜欢使用没有非常JS语法的东西。类似于把手或灰尘的东西。事实上，如果有人可以建议如何制作把手或灰尘做我要求的，那将不胜感激。

Answer 1

我认为这对 dustjs 是可行的。这是获得预期输出的最简单方法之一。

<div id="people">
  {#people}
    <div>
      <span data-path="people[{$idx}].firstName">{.firstName}</span>{~n}
      <span data-path="people[{$idx}].lastName">{.lastName}</span>{~n}
    </div>
  {/people}
</div>

或者您可以创建一个可以产生预期输出的自定义帮助程序。

var dust = require("dustjs-linkedin");
require("dustjs-helpers");

dust.helpers.PrintName = function(chunk, context, bodies, params) {
    var Data = params.dataItem.split("."), i, len;
    for (i = 0, len = Data.length; i < len; i += 1) {
        chunk.write(Data[i]);
        if (i === len - 2) {
            chunk.write("[" + context.stack.tail.head.$idx + "]");
        }
        if (i !== len - 1) {
            chunk.write(".");
        }
    }
    return chunk;
};

模板看起来像这样，

<div id="people">{~n}
  {#people}
    <div>{~n}
      <span data-path="{@PrintName dataItem="people.firstName"/}">{.firstName}</span>{~n}
      <span data-path="{@PrintName dataItem="people.lastName" /}">{.lastName}</span>{~n}
    </div>{~n}
  {/people}
</div>{~n}

JS模板语言，允许我确定路径

1 个答案: