如何向模板元素添加不同的类？

Question

在我的JSON文件中，我有7个对象，其中前3个对象的"is_read"属性为1，后4个对象的"is_read"为0。我使用模板添加行，并希望根据它们的"is_read"值（".news_read"用于"is_read" == 1，".news_unread"用于"is_read" == 0）给tr不同的类。 然而，最终我得到了7行都有"news_unread"类的结果。尽管控制台显示我有3个"newsData.get('is_read') == 1"和4个"newsData.get('is_read') == 0"的对象。 我想知道如何创建具有不同类的行。我尝试使用newsRow.addClass，但错误信息显示一个对象"..."(newsRow模板)不能有addClass方法。

render: function() {
    news.fetchMyNews();
    for (var i = 1; i <= news.length; i++)   {
        var newsData = news.get(i);
        var newsRow = JST["news/row"](newsData.attributes);
        $("#news_tbody").append(newsRow).first('tr').attr("class",function(){
            if (newsData.get('is_read') == 1)
                return "news_read";
            else if (newsData.get('is_read') == 0)
                return "news_unread";
        });
    }           
}

- Arman Ospanov

---

你能创建一个jsfiddle吗？ - Alex

Answer 1

您写道：

我尝试使用 newsRow.addClass，但错误信息显示一个对象 …（newsRow 模板）不能有 addClass 方法。

但是在您的示例代码中我找不到 addClass 方法：

$("#news_tbody").append(newsRow).first('tr').attr("class",function(){
    if (newsData.get('is_read') == 1)
        return "news_read";
    else if (newsData.get('is_read') == 0)
        return "news_unread";
 });

我建议你尝试使用这段代码（在 if 语句中使用 addClass 而不是 attr 并添加块）：

$("#news_tbody").append(newsRow).first('tr').addClass(function(){
    if (newsData.get('is_read') === 1){
        return "news_read";
    } else if (newsData.get('is_read') === 0) {
        return "news_unread";
    }
});

- Alex

---

现在tbody同时具有类名："news_read"和"news_unread"。<tbody id="news_tbody" class="news_read news_unread"> - Arman Ospanov

Answer 2

如@Pinal所建议的那样，我使用了addClass。

然而，在append(newsRow)之后，我使用.children('tr')，它也很好用。

$("#news_tbody").append(newsRow).children('tr').addClass(function(){
  if (newsData.get('is_read') === 1){
    return "news_read";
  } else if (newsData.get('is_read') === 0) {
    return "news_unread";
  }
});

- Arman Ospanov