渲染backbone.js时更改表格的背景颜色答案

【问题标题】：Changing the background color of a table while rending backbone.js渲染backbone.js时更改表格的背景颜色
【发布时间】：2012-11-01 13:48:15
【问题描述】：

我创建了一个主干视图，用于呈现表格行模板中的行。我希望能够在渲染时更改表格行的背景颜色。那就是 fetch 需要时间从服务器获取所有项目，所以我想知道如何确保视图已完全呈现，然后再调用另一个更改表中某些行的背景的方法。我只使用一个视图来呈现整个集合。我正在使用一个使用 handlebars.js 的模板。有人可以帮我解决这个问题吗？

【问题讨论】：

您希望更改所有行或替代行或某些特定行的颜色吗？
一些基于条件的特定行。我试图调用另一种方法来获取所有表行并检查条件并将css应用于它。但它根本没有被调用。在渲染方法中，我使用 fetch 从服务器获取集合并将其渲染到表格行的 html。
是每行一个视图，还是每个表一个视图？
听起来您正在一次渲染所有行，如果您使用的是 underscore.js 模板，那么您可以在其中执行 javacsript 代码并有条件地向您的行添加不同的类。
是的，我正在一次渲染所有行。我正在使用 handler.js 模板而不是 underscore.js。我只能在所有行都呈现后检查条件。我试图在渲染后调用该条件方法，但它似乎还没有更新表行。它仍然显示 0。

标签： jquery css backbone.js

【解决方案1】：

我只是告诉你如何修改元素的背景颜色，因为你的问题不清楚。

  $(" element ").css("background-color", "required-color")

或

  $(" element ").addClass("background_class")

并添加这样的样式：

  .background_class{
        background-color: color_name;
    }

如果这不是您想要的，请尝试发布一些代码，我们会尝试回答。

【讨论】：

this.collection.fetch({ success: function() { that.render(); } }) 在渲染方法代码是这样的：$('#ProductContainer').html(result)) ;其中 result 有一个列表 f 我要呈现的行。现在渲染完成后，我想调用一个获取表格行数的方法，然后根据条件更改 bgcolor。我知道如何设置 css，但我想知道如何调用其他方法来执行此条件检查和着色。我可以调用该方法，但表行数仍为 0
@8GB 您的视图结构如何？此外，您可能应该编辑您的问题并在那里添加代码。
我试图编辑它，但它不接受它。忍受我对堆栈溢出还是新手。
@8GB 没问题，要编辑您的问题，请单击问题正下方的编辑链接。您是使用一个模板来呈现所有行还是为每个行使用单独的模板？
一个模板来呈现所有行。

【解决方案2】：

根据您的 cmets，听起来您只有一个视图来负责渲染所有行。假设您使用的是单个模板，您可以在其中添加一个条件语句。例如

<div id="rows-template" type="text/template">
<% _each(list, function(item) { %>
    <li <% if (item.something) { 'class="blue"' } %> ><%= item.name %></li>
<% }); %>
</div>

【讨论】：

好的我现在从你的评论中看到你没有使用 underscore.js 作为你的模板，但是你应该可以做类似的事情（我对处理程序不太熟悉（你是说车把?))。
handlebar.js 是的，正如我提到的它正在工作，我不能在模板内做任何事情，需要在 js 模块中检查该条件。正如我所提到的，它现在正在工作。唯一的问题是它只为交替行着色。因为我正在使用 twitter bootstrap 的“table-bordered”类。有什么解决办法吗？

【解决方案3】：

我找到了解决方案。我使用了 Jquery 的 when 和 then 函数。我使用 then 函数来调用我的条件方法，并将 fetch 放在 when 下。它现在正在工作并更改 bg-clor。唯一的问题是该表具有 twitter bootsraps 的 css“table-bordered”类，因此 bg-color 仅显示在交替行中。

【讨论】：

我的意思是'table-striped'而不是table-bordered。当我删除“table-striped”类时它工作得很好。从桌子上。
很高兴您解决了问题。您应该通过单击此答案左侧的复选标记将此标记为您接受的未来访问者的答案。此外，您可能仍应编辑您的问题，以便更清楚问题所在。