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

Question

在我的 JSON 文件中，我有 7 个对象，其中前 3 个对象有 "is_read" attribute == 1,最后 4 个有 "is_read" == 0 。我使用模板添加行，并希望根据其 "is_read" 为 tr 提供不同的类。值( ".news_read" 代表 "is_read" == 1 ， ".news_unread" 代表 "is_read" == 0 )。

但是，我最终得到了 7 行，它们都具有“news_unread”类。不过，console.log 显示我有 3 "newsData.get('is_read') == 1"和 4 "newsData.get('is_read') == 0"对象。

我想知道如何创建具有不同类的行。我尝试执行 newsRow.addClass，但错误消息显示对象 <tr><td>...</td></tr> (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";
        });
    }           
}

Answer 1

你写道:

I tried to do newsRow.addClass, but the error message says that an object ... (newsRow template) can't have a method 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";
 });

我只是建议您尝试此代码(使用addClass，而不是attr并在if语句中添加 block ):

$("#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";
    }
});