下划线循环 2 数组并匹配模板中的值

Question

我有一些带有 2 个数组的虚拟数据，这些数组会有一些重复的值。在我的模板中，我想比较 2 个数组并向任何匹配为重复的数组添加可见性 class is-hidden，但我不确定如何循环两个数组并进行匹配？我可以运行 isEqual 在某种 each loop 中对抗 2 吗？

把手模板

<script type="text/html" id="tmpl">
    <% _.each(mappedSessions, function(session) { %>

       <p class="<% if(session === deleteSessions) { %>is-hidden<% } %>">
           Mapped Entry <u><%= session %></u> Available
       </p>
   <% }) %>
</script>

JS

var data = {
    "id": 1,
    "deleteSessions": ["X0101"],
    "mappedSessions": ["ABC123", "EDF092", "X0101"]
}

var template = _.template($('#tmpl').html());

$('.js-output').html(template(data));

Answer 1

你应该使用 intersection...

var duplicates = _.intersection(a, b);

这个名字来自集合论，两个集合的交集是两个集合中存在的所有元素的集合。

Answer 2

在这种情况下，最好在将数据发送到模板之前格式化数据

var data = {
    "id": 1,
    "deleteSessions": ["X0101"],
    "mappedSessions": ["ABC123", "EDF092", "X0101"]
}

var template = _.template($('#tmpl').html());
var sessions = _.map(data.mappedSessions, function (session) {
  return {
    isHidden: _.indexOf(data.deleteSessions, session) >= 0,
    value: session
  }
});

$('.js-output').html(template({ sessions: sessions }));

.is-hidden {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

<script type="text/html" id="tmpl">
    <% _.each(sessions, function(session) { %>
       <p class="<% if (session.isHidden) { %>is-hidden<% } %>">
           Mapped Entry <u><%= session.value %></u> Available
       </p>
   <% }) %>
</script>

<div class="js-output"></div>

下划线循环 2 数组并匹配模板中的值

Underscore loop 2 arrays and match values in template

javascript

arrays

underscore.js

underscore.js-templating