Как перемещаться по алфавиту через underscoreJS

Я использую метод Underscore template() в представлениях BackboneJS. Я хотел бы показать список букв алфавита на мой взгляд, чтобы отсортировать коллекцию по букве.

В результате у меня есть список из 26 ссылок (одна ссылка = одна буква) на мой взгляд. Вместо того, чтобы копировать все ссылки (что очень плохо для обслуживания кода), мне было интересно, можно ли прокручивать алфавит через underscoreJS.

Результат для отображения:

<li ><a href="#">a</a></li>
<li ><a href="#">b</a></li>
<li ><a href="#">c</a></li>
...
<li ><a href="#">z</a></li>

Ответ 1

var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
_.each(alphabet, function(letter) {
  console.log(letter);
});

Как вы могли это сделать.

Ответ 2

Создайте диапазон с символами

var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 
// [97 .. 122]

Создайте массив с буквами

var letters = _.map(alphas, a => String.fromCharCode(a));
// see @deefour comment

// Non ES6 version
// var letters = _.map(alphas, function(a) {
//    return String.fromCharCode(a);
// });

// [a .. z]

Вставить в свой шаблон

var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);
var html = compiled({letters : letters});

И демо http://jsfiddle.net/hPdSQ/17/

var alphas = _.range(
    'a'.charCodeAt(0),
    'z'.charCodeAt(0)+1
); 

var letters = _.map(alphas, a => String.fromCharCode(a));

var tpl = 
'<ul>'+
    '<% _.each(letters, function(letter) { %>'+
        '<li><%= letter %></li>'+
    '<% }); %>'+
'</ul>';
var compiled = _.template(tpl);

var html = compiled({letters : letters});

document.getElementById('res').innerHTML = html;

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id='res'></div>

Ответ 3

for(var letter=65;letter<91;letter++)
{
var _char = String.fromCharCode(letter);
console.log(_char);
}

или используйте от 97 до 123 ASCII-код для строчных букв

Ответ 4

for (var i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
  console.log(String.fromCharCode(i));
}

Ответ 5

Используйте шаблон подчеркивания для представления в режиме мака.

HTML

<ul id="myList"></ul>
<script type="text/html" id='listItems'>
    <% _.each(items, function(item, index) { %> 
        <li> <%=item %> </li>
    <% }) %>
</script>

Javascript

var ListView = Backbone.View.extend({
    render: function (data) {
        $(this.el).html(_.template(this.template, {
            items: data
        }));
    }
});


var listView = new ListView();
listView.template = $("#listItems").html();
listView.setElement("#myList");
listView.render(['a', 'b', 'c', 'd']);

demo: http://jsfiddle.net/R7AAp/4/

Ответ 6

Использование ES6 for-of:

for(let char of "abcdefghijklmnopqrstuvwxyz" )
  console.log(char); // prints 'a' to 'z'

Ответ 7

Другой подход с подчеркиванием (или loadash):

_.map(_.range(26), function(i) { return String.fromCharCode(97 + i) });

// returns ['a', 'b', ..., 'z']

Ответ 8

Используя underscore.js и jQuery в сочетании, вы сможете это сделать (underscore.js не может самостоятельно вставлять/манипулировать DOM).

var abc = ['a', 'b', 'c', 'd']; //i disregarded how you get the list of letters.

_.each(abc, function(letter){
    $('ul').append('<li><a href="#">'+letter+'</a></li>');
});

Также сделана скрипка для вас

Ответ 9

Подчеркивание не имеет таких возможностей, но ваш случай может сделать некоторые трюки в шаблоне. измените свой шаблон следующим образом:

<% for(var i=65; i<90; i++) { %>
<li ><a href="#"><% print(String.fromCharCode(i)); %></a></li>
<% } %>

это должно быть то, что вы хотите.

Ответ 10

Здесь улучшенная * версия чистого JS-кода @Medo Medo:

    var letters=[], letter_first = 'a', letter_last = 'z' // you can also use A and Z
    for (var letter=letter_first.charCodeAt(0);letter<=letter_last.charCodeAt(0);letter++)
      letters.push(String.fromCharCode(letter))
    document.write(letters.join(''))