0

我目前正在寻找做一些非常具体的事情的 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 繁重语法的东西。类似于车把或灰尘的东西。事实上，如果有人可以建议如何按照我的要求制作车把或灰尘，那将不胜感激。

4

1 回答 1

2

我认为这对于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}
于 2013-08-31T05:16:59.810 回答