Question

我试图做一些非常简单的事情：我想通过会议向NBA球队展示，但这并不是JSON的结构。

我不想要求更改REST服务结构，即让团队成为会议节点的子阵列。

这是一个演示问题，即JSON具有我需要的数据，但是如何使用dustjs呈现它？

您可以在此处查看我的jsfiddle尝试：xpath equivalent jsdust

<script id="league-template2">
    <div class="conference"> 
    <h3>[I WANT TO PUT THE CONFERENCE NAME HERE EG EASTERN] Conference</h3>
    {#teams}   
        <ul>
            {#properties}            
                {@eq key=name value="numeric"}
                    <li class="teamName teamdd_{value}">
                        <div class="logo-nba-small nba-small-[I WANT TO PUT THE ABBV HERE EG PHI]"><a>[I WANT TO PUT TEAM NAME HERE EG 76ERS]</a></div>
                    </li>
                {/eq}
            {/properties}
        </ul>
   {/teams}
   </div>
</script>
<div id="output3"></div><br />


    $(document).ready(function() {
    var league2014 = {
    "teams": [{
        "properties": [{
        "years": null,
        "name": "conference",
        "value": "eastern"
        }, {
        "years": null,
        "name": "abbv",
        "value": "phi"
        }, {
        "years": null,
        "name": "numeric",
        "value": "20"
        }],
        "name": "76ers"
    }, {
        "properties": [{
        "years": null,
        "name": "conference",
        "value": "western"
        }, {
        "years": null,
        "name": "abbv",
        "value": "mem"
        }, {
        "years": null,
        "name": "numeric",
        "value": "29"
        }],
        "name": "grizzlies"
    }, {
        "properties": [{
        "years": null,
        "name": "conference",
        "value": "eastern"
        }, {
        "years": null,
        "name": "abbv",
        "value": "was"
        }, {
        "years": null,
        "name": "numeric",
        "value": "27"
        }],
        "name": "wizards"
    }]
    }    
    var source3 = $("#league-template2").html();
    var compiled3 = dust.compile(source3, "intro3");
    dust.loadSource(compiled3);
    dust.render("intro3", league2014, function(err, out) {
    $("#output3").html(out);
    });
});

Answer 1

试试这个：

<div class="conference"> 
{#teams}
  {#properties teamName=name}
    {@select key=name}
      {@eq value="conference"}
        <h3>{value} Conference</h3><ul>
      {/eq}
      {@eq value="numeric"}
        <li class="teamName teamdd_{value}">
      {/eq}
      {@eq value="abbv"}
        <div class="logo-nba-small nba-small-{value}"><a>{teamName}</a></div>
        </li>
      {/eq}
    {/select}
  {/properties}
  </ul>
{/teams}
</div>

Answer 2

以下是我如何在保持模板简单的同时满足您的要求。

模板：

<div class="conference"> 
{#teamsByConference}
  <h3>{conference}</h3>
  <ul>
  {#teams}
    <li class="teamName teamdd_{numeric}">
      <div class="logo-nba-small nba-small-{abbv}"><a>{name}</a></div>
    </li>
  {/teams}
  </ul>
{/teamsByConference}
</div>

上下文：

{
    // This is a Dust context function. It's called a handler!
    // It gets called by Dust when you try to access it. Handlers act like variables in templates
    // But they can do much more than just return a value. They can make async AJAX requests,
    // create new data, and all sorts of things. They're (in my opinion) one of the best features of Dust.
    // https://github.com/linkedin/dustjs/blob/master/docs/api.md#handlers
    "teamsByConference": function(chunk, context, bodies, params) {
      // Get the teams variable from the Dust context. You can use this.teams, but
      // that won't walk the context tree in case this function is at a different level
      var teams = context.get("teams"),
          conferences = {},
          conferenceList = [],
          conference,
          x;

      // I'm using ECMAScript 5 just to save space
      // Transform the JSON into the format we want and store it in conferences
      teams.forEach(function(team) {
        // Teams have an array of properties, but it'd be much more JSON-like if they
        // were keys in an Object. So I'll reduce the array to a single object.
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
        var newTeam = team.properties.reduce(function(acc, prop) {
          acc[prop.name] = prop.value;
          return acc;
        }, {});
        newTeam.name = team.name;

        // Combine teams by their conference
        conferences[newTeam.conference] = conferences[newTeam.conference] || [];
        conferences[newTeam.conference].push(newTeam);
      });

      // Transform the conference object into an array so Dust iterates over it
      for(conference in conferences) {
        conferenceList.push({ conference: conference, teams: conferences[conference] });
      }

      // At this point we have an array of conferences. Each conference contains an array of teams!
      // Iterate over the returned list of conferences by returning it
      // Dust chunks and contexts are super-cool and you can read the source to learn all about them
      return conferenceList;
    },

    "teams": [...]
    }

我正在使用上下文帮助器来按照它应该的方式格式化上下文中的数据。这样可以保留模板中的任何分组或成员逻辑。

如果你不喜欢这种哲学，那就没关系 - 但这是尘埃的哲学。

dustjs xpath父等价物

2 个答案: