2017-09-24 19 views
0

私は今lodashを学んでいます。私の目標は、ユーザーの配列をlodashテンプレートを使用してhtmlテーブルに出力することです。しかし、なぜ私のテンプレートがうまくいかないのか分かりません。lodash _.template()間違った出力

私のユーザー

var users = [ 
    { 'user': 'fred', 'active': false, 'age': 40 }, 
    { 'user': 'pebbles', 'active': false, 'age': 1 }, 
    { 'user': 'barney', 'active': true, 'age': 36 } 
]; 

私のテンプレート

let template4 = _.template('<ul>' + 
    '<% _.forEach(users, function(user) { %>' + 
    '<li><%- user.user %></li>' + 
    '<% }); %>' + 
    '</ul>'); 

let template4Result = template4({ 'users': users }); // I expect => '<ul><li>fred</li><li>pebbles</li><li>barney</li></ul>' 

console.log(template4Result);// => '<ul></ul>' 

私はそれが私のコレクションをループし、にいくつかのHTMLコードを追加しますので、私は私のテンプレートをデザインする方法を見つけ出すことはできませんその中のすべてのユーザー。

+0

は、あなたの 'users'が正しく渡されていますか? – Soviut

答えて

0

あなたのサンプルコードが動作します。以下は実行中のスニペットです。

var users = [ 
 
    { 'user': 'fred', 'active': false, 'age': 40 }, 
 
    { 'user': 'pebbles', 'active': false, 'age': 1 }, 
 
    { 'user': 'barney', 'active': true, 'age': 36 } 
 
]; 
 

 
let template4 = _.template('<ul>' + 
 
    '<% _.forEach(users, function(user) { %>' + 
 
    '<li><%- user.user %></li>' + 
 
    '<% }); %>' + 
 
    '</ul>'); 
 

 
let template4Result = template4({ 'users': users }); 
 
console.log(template4Result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

問題は、テンプレートに渡しているusers変数は、その中にはアイテムを持っていないということです。だからあなたはあなたが期待しているデータを取得していない。

(AJAX呼び出しを使用して)非同期にユーザーを取得する場合は、コールバックを使用してajax呼び出しが返された後でテンプレートを生成する必要があります。以下は疑似(例:ajaxは実際のインターフェイスではありません)です。

ajax.get(function(users) { 
    // this would be the "success" callback 
    // we're now able to render the template since we have the data 

    let template4Result = template4({ 'users': users }); 
}) 
+0

ええ、あなたは正しいです。変数に問題がありました。私は 'userModel = _.take(users、300);'の代わりに 'userModel = users;'を使っていました。あなたの助けをありがとう! –

0

あなたはこれを試すことができます。

let template4 = _.template('<ul>' + 
'<% _.forEach(users, function(value, key) { %>' + 
'<li><%- value.user %></li>' + 
'<% }); %>' + 
'</ul>');