2015-09-02 5 views
0

Использование handlebars.js и API Behance - {{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> 

ответ

1

Редактирование быть в контексте фактического вопроса:

Вы будете хотеть, чтобы выйти на поле и превратить его в массив. Так что-то вроде

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

//send availabilities to template 

Затем в шаблоне вы можете распечатать его, как:

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

Или, как говорит @isherwood вы можете зарегистрировать помощник рулей, чтобы сделать это для вас.

+0

Если шаблон оценивает его как 'user.sections.availability.toString()', и все элементы массива являются строками, есть вероятность, что он будет распечатан как «item1, item2, item3». – Brodie

+0

Извините, но если вы прочитали весь вопрос w/title в контексте, тогда да, я должен был бы лучше знать, что это поле строки. – Brodie

+0

Это не массив ... это всего лишь текст в текстовом поле. Поэтому мне нужен код, который будет читать текст и разделять каждый элемент на основе запятой. Я думаю ... –

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> 

More

Обратите внимание, что это неполный пример. Я попытался перевести его на ваш код, но у меня его нет. Вместо этого я предлагаю начать с связанного примера.

+0

Я добавил свой текущий код к своему оригинальному сообщению. Я пробовал то, что вы сказали, но все еще не работал. Я думаю, теперь я просто не знаю, где и как интегрировать ваш фрагмент кода в свой код. –

+0

Любое обновление теперь включило мой полный код? Я попробовал вашу ссылку «больше», и мне удалось заставить ее работать, однако мне пришлось отключить часть кода, поэтому я не был уверен, как объединить все это вместе, поэтому ваш код работает с моим кодом. –