0

使用 handlebars.js 和 Behance API -{{user.sections.[availability]}}输出 - Full-Time, Contract, Relocation。

我希望将每个逗号分隔的单词输出作为其项目，类似于以下内容：

<ul>
  <li>Full-Time</li>
  <li>Contract</li>
  <li>Relocation</li>
</ul>

这会包括一些 Javascript 或 #each 语句吗？如果是这样，有人可以指导我找到有用的解决方案或片段吗？

对于那些问...这是我当前的 javascript 代码和 HTML。

(function() {
    var behanceUserAPI = 'http://www.behance.net/v2/users/' + userID + '?callback=?&api_key=' + apiKey;
    function setUserTemplate() {
        var userData = JSON.parse(sessionStorage.getItem('behanceUser')),
            getTemplate = $('#user').html(),
            template = Handlebars.compile(getTemplate),
            result = template(userData);
        $('body').html(result);
        // AUTO-TIME GREETING + COPYRIGHT -----------------------------------------
        var date = new Date();
        var time = date.getHours();
        var greeting = "";
        if (time < 12) {
            greeting = "Morning";
        } else if ((time >= 12) && (time < 19)) {
            greeting = "Howdy";
        } else {
            greeting = "Evening";
        }
        document.getElementById("greeting").innerHTML = greeting;
        document.getElementById("auto-year").innerHTML = "Copyright &copy; " + date.getFullYear();
    }
    if (sessionStorage.getItem('behanceUser')) {
        setUserTemplate();
    } else {
        $.getJSON(behanceUserAPI, function(user) {
            var data = JSON.stringify(user);
            sessionStorage.setItem('behanceUser', data);
            setUserTemplate();
        });
    }
})();

<ul class="availability">
  {{#splitSTring user.sections.[Availability] delimiter=", "}}
    <li><i class="icon-check twentytwo color"></i><span>{{this}}</span>   </li>
  {{/splitString}}
</ul>
4

2 回答 2

1

根据实际问题进行编辑：

您将要占用该字段并将其变成一个数组。所以像

var availabilities = user.sections.availability.split(',');

//send availabilities to template

然后在您的模板中，您可以将其打印为：

{{#each availabilities as |time|}}
  <li>{{time}}</li>
{{/each}}

或者正如@isherwood 建议的那样，您可以注册一个 HandleBars 助手来为您执行此操作。

于 2015-09-02T15:29:17.953 回答
1

注册一个助手并将逗号空间指定为分隔符。

Handlebars.registerHelper("splitString", function(options){
      var ret = "";

      var tempArr = context.trim().split(options.hash["delimiter"]);

      for(var i=0; i < tempArr.length; i++)
      {
        ret = ret + options.fn(tempArr[i]);
      }

      return ret;
});


<ul>
  {{#splitSTring user.sections.[availability] delimiter=", "}}
  <li>{{this}}</li>
  {{/splitString}}
</ul>

更多的

请注意，这是一个不完整的示例。我试图将它翻译成你的代码，但我没有全部。我建议从链接的示例开始。

于 2015-09-02T15:34:59.313 回答