使用带下划线的对象和数组进行导航

Navigation using objects and arrays with Underscore

本文关键字：数组 导航 对象 下划线      更新时间：2023-09-26

我需要使用此数据和下划线设置导航。

有两个标题，每个标题有 5 个链接。

这就是我拥有数据的方式，我无法让 Underscore 工作并带来所有链接和标签，任何人都可以帮忙吗？

var navigations = [{
    "main_label": "GIRLS",
    "sub_page_reference": "girls",
    "links": [{
        "label": "NEW IN >",
        "href": "/uk/newin",
        "target": "_self",
      },
      {
        "label": "sales >",
        "href": "/uk/salesy",
        "target": "_self",
      },
      {
        "label": "girls >",
        "href": "/uk/girls",
        "target": "_self",
      },
      {
        "label": "boys >",
        "href": "/uk/boys",
        "target": "_self",
      },
      {
        "label": "party >",
        "href": "/uk/party",
        "target": "_self",
      }
    ]
  },
  {
    "main_label": "BOYS",
    "sub_page_reference": "boys",
    "links": [{
        "label": "NEW IN >",
        "href": "/uk/newin",
        "target": "_self",
      },
      {
        "label": "sales >",
        "href": "/uk/salesy",
        "target": "_self",
      },
      {
        "label": "girls >",
        "href": "/uk/girls",
        "target": "_self",
      },
      {
        "label": "boys >",
        "href": "/uk/boys",
        "target": "_self",
      },
      {
        "label": "party >",
        "href": "/uk/party",
        "target": "_self",
      }
    ]
  }
];

下面是一个 JSFiddle，它获取链接和标签数组，然后使用下划线模板输出到页面： https://jsbin.com/joqika/1/edit?html,js,output

使用下划线获取链接和标签数组：

var l = _.map(navigation, function(item) {
  return item.links;
});
var linksFlat = _.reduceRight(l, function(a, b) { 
  return a.concat(b); 
}, []);

使用模板输出到页面：

var templ = _.template('<% _.each(links, function(l) { %><li><a href="<%= l.href %>"><%= l.label %></a></li> <% }); %>');
var compiled = templ({links: linksFlat});
$('.js-links').html(compiled);

只是让它工作，我需要在那里有一个 for 循环：<@ for （i = 0; i <item.links.length;> ....<@ } @>

相关文章：