3

我正在尝试使用 Deface 在 Spree Admin 的表格中的列中添加一个按钮。但我就是无法正确使用类似 CSS 的选择器。我可以使用数据挂钩选择表格行，并且可以选择子元素（例如 td、span），但不能按特定类（在本例中为 .balance_due）进行选择。我错过了一些简单的东西吗？

我的覆盖：

Deface::Override.new(:virtual_path    => "spree/admin/orders/index",
                  :name           => "add_capture_order_shortcut2",
                  :insert_bottom => "[data-hook='admin_orders_index_rows'] .balance_due", 
                  :text           => '<h1>hey yo, your balance is due</h1>'
                  )

我已经使用 jQuery 确认了 CSS 选择器，即：

$("[data-hook='admin_orders_index_rows'] .balance_due") 
  => [<span class=​"state balance_due">​…&lt;/span>]

生成的 HTML 的摘录：

<tr data-hook="admin_orders_index_rows" class="state-complete odd">
  ...
  <td class="align-center"><span class="state balance_due"><a href="/admin/orders/R617712280/payments">balance due</a></span></td>
  ...
</tr>
4

1 回答 1

5

Deface 在.html.erb渲染之前作用于实际模板，而不是生成的输出。

您需要确保选择器与虚拟路径中指定的模板中直接存在的内容相匹配。

来自 spree 模板的相关行是：

<td class="align-center"><span class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></span></td>

注意.balance_due不是直接在模板中指定，而是从变量中赋值。

解决此问题的最简单方法是覆盖整个

[data-hook='admin_orders_index_rows']

使用您的内容，或使用一些花哨的 CSS 选择器:first-child来获得您想要的确切部分。

解决此问题的更好方法是提交拉取请求以大肆使用数据挂钩，以允许人们选择带有污点的特定行。如果有人决定重新订购东西或添加新行，那么将来中断的可能性就会大大降低。

于 2013-06-12T18:14:38.930 回答