如何使用handlebars.js的值過濾此數組？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> 
 
</head> 
 
<body> 
 

 
<!--This is our template. --> 
 
<!--Data will be inserted in its according place, replacing the brackets.--> 
 
<script id="t" type="text/x-handlebars"> 
 
    {{#each_when profile "gender" "male"}} 
 
     {{ID}}. {{from}} {{gender}}<br> 
 
    {{/each_when}} 
 
</script> 
 

 
<!--Your new content will be displayed in here--> 
 
<div class="content-placeholder"></div> 
 

 
<script> 
 
var json = { 
 
    "profile": [ 
 
     { "ID": 1, "gender": "male", "from": "Olivia" }, 
 
     { "ID": 2, "gender": "male", "from": "Meagen" }, 
 
     { "ID": 3, "gender": "female, male", "from": "Aaron" }, 
 
     { "ID": 4, "gender": "female", "from": "Aaron" } 
 
    ] 
 
}; 
 

 
Handlebars.registerHelper('each_when', function(list, k, v, opts) { 
 
    console.log(arguments); 
 
    var i, result = ''; 
 
    for(i = 0; i < list.length; ++i) 
 
     if(list[i][k] == v) 
 
      result = result + opts.fn(list[i]); 
 
    return result; 
 
}); 
 

 
var t = Handlebars.compile($('#t').html()); 
 
$('body').append(t(json)); 
 
</script> 
 
</body> 
 
</html>

上述代碼的結果是：

1. Olivia male 
2. Meagen male

但我想以下：

1. Olivia male 
2. Meagen male 
3. Aaron male

我被一個屬性過濾對象的數組和該屬性是一個可以包含多個值的字符串。

有沒有人可以告訴我爲什麼3. Aaron male沒有出現？

來源

2017-01-22 Rehaan Kkhaan

與ID的3的對象不會附加到您的結果，因爲您的助手正在篩選出其屬性不等於"male"的對象。對象3的gender是"female, male"，所以它不通過相等性測試。

如果你想檢查是否list[i][k]包含v，那麼你必須更新你的邏輯。

var i, result = '', values; 

for (i = 0; i < list.length; ++i) { 
    values = list[i][k].replace(/\s*,\s*/, ',').split(','); 
    if (values.indexOf(v) > -1) { 
     result += opts.fn(list[i]); 
    } 
} 

return result;

請注意，我使用的是正則表達式來刪除旁的空格字符「」分裂之前 - 這樣一來，我可以保證，在我values數組中的元素不會開始或以空格結尾。

此更新會將「Aaron」對象附加到輸出。然而，最終的結果將是：

1. Olivia male<br> 
2. Meagen male<br> 
3. Aaron female, male<br>

如果你不想「女性，男性」，以顯示阿龍，這意味着你真的不希望渲染對象的gender屬性。相反，您應該將您想要的文本直接硬編碼到模板中：

{{ID}}. {{from}} male<br>

來源

2017-01-25 04:37:08 76484

感謝'76484'您的回覆。但是你的代碼不工作。 –

@RehaanKkhaan：當我編寫解決方案時，我更改了一些變量名稱。我已經將它們改回原來的'k'和'v'。有關工作示例，請參閱https://jsfiddle.net/zxm7x9sy/。 – 76484

如何使用handlebars.js的值過濾此數組？

回答

相關問題