17

BackboneJS ビューで Underscore の template() メソッドを使用しています。コレクションを文字でソートするために、ビューにアルファベットのリストを表示したいと思います。

その結果、ビューには 26 個のリンク (1 つのリンク = 1 文字) のリストが表示されます。各リンクをコピーして貼り付ける (コードの保守性に非常に悪い) 代わりに、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>
4

9 に答える 9

14

  1. 文字コードで範囲を作成する

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

  2. 文字で配列を作成する

    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]

  3. テンプレートに挿入する

    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>

于 2013-05-28T10:04:01.117 に答える
7 
for(var letter=65;letter<91;letter++)
{
var _char = String.fromCharCode(letter);
console.log(_char);
}

または、小文字には 97 ～ 123 の ASCII コードを使用します

于 2016-01-14T03:35:55.937 に答える
3

ES6 for-of の使用:

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

テンプレートでそれを使用するのは非常に簡単で、Babelを使用して、その構文をサポートしていないブラウザー用のコードにトランスパイルすることができます。

于 2016-06-04T15:34:44.180 に答える
0

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>');
});

あなたのためにフィドルも作りました

于 2013-05-28T09:58:53.317 に答える