Dav*_*ook 3 css-selectors spree deface
我正在尝试使用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>'
)
Run Code Online (Sandbox Code Playgroud)
我已经使用jQuery确认了CSS选择器,即:
$("[data-hook='admin_orders_index_rows'] .balance_due")
=> [<span class=?"state balance_due">?…</span>]
Run Code Online (Sandbox Code Playgroud)
生成的HTML的一个exerpt:
<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>
Run Code Online (Sandbox Code Playgroud)
在.html.erb呈现之前,Deface会对实际模板执行操作,而不是生成的输出.
您需要确保选择器匹配直接在虚拟路径中指定的模板中的内容.
狂欢模板的相关行是:
<td class="align-center"><span class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></span></td>
Run Code Online (Sandbox Code Playgroud)
请注意,.balance_due未在模板中直接指定,而是从变量中指定.
解决这个问题的最简单方法是覆盖整个
[data-hook='admin_orders_index_rows']
Run Code Online (Sandbox Code Playgroud)
与您的内容,或使用一些花哨的CSS选择器,:first-child以获得您想要的确切部分.
一个更好的办法来解决,这将是提交pull请求与数据挂钩的大礼包,让人们与抹掉选择特定行.如果某人决定重新订购或添加新行,那么将来破坏的可能性就会大大降低.