在一维数组中使用 #each 访问值

Posted 2023-02-19

【中文标题】在一维数组中使用 #each 访问值

【英文标题】：Access values using #each in a one dimensional array在一维数组中使用 #each 访问值

【发布时间】：2014-03-15 21:52:17

【问题描述】：

我找到了很多使用 #each 帮助器迭代多维数组的示例，但我不知道如何访问一维数组中的每个值。

以这个数组为例：

skills: ['Design', 'Development', 'html5', 'CSS', 'javascript'],

如何在下面的帮助器中输出每个项目？

template: Handlebars.compile(
'<div>' + 
    '#each skills  the_item_output  /each' +
'</div>'
),

我需要在 the_item_output 中放置什么才能看到实际物品？

【问题讨论】：

查看文档。 handlebarsjs.com/#iteration

多维数组，我想，这里的术语是错误的

【参考方案1】：

#each skills
  <li>this</li>
/each

【讨论】：

我认为你需要的是技能，而不是人

【参考方案2】：

标量值数组应使用Simple Iterators 语法。您需要在 skills 属性上声明一个 #each 块。

每个值的占位符可以是this 或.。

您需要使用以下模板：

#each skills
    <li>this</li>
/each

或者，您可以使用#list。

#list skills
    <li>.</li>
/list

示例

function listToHTML(items) 
  return '<ul>' + items.map(function(item) 
    return '<li>' + item + '</li>';
  ).join('') + '</ul>';


Handlebars.registerHelper(
  scalar_list_raw : function(items) 
    return listToHTML(items);
  ,
  
  scalar_list_safe_string: function(items) 
    return new Handlebars.SafeString(listToHTML(items));
  ,
);

var data = 
  skills: [ 'Design', 'Development', 'HTML5', 'CSS', 'JavaScript' ],
;

$(function() 
  var source = $("#skills-template").html();
  var template = Handlebars.compile(source);

  $('body').append(template(data));
);

ul li 
  list-style-type: upper-roman;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script>

<script id="skills-template" type="text/x-handlebars-template">
  <h2>Skills - [Block] Each</h2>
  <ul>
    #each skills
    <li>this</li>
    /each
  </ul>

  <h2>Skills - [Helper] SafeString</h2>
  scalar_list_safe_string skills

  <h2>Skills - [Helper] Raw HTML</h2>
  scalar_list_raw skills
</script>