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

.html.erbDefaceは、生成された出力ではなく、レンダリングされる前に実際のテンプレートに作用します。

セレクターが、仮想パスで指定されたテンプレートに直接あるものと一致することを確認する必要があります。

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']

:first-childまたは、必要な部分を正確に取得するような派手な CSS セレクターを使用します。

これを修正するより良い方法は、プル リクエストを送信してデータ フックを使用し、ユーザーが特定の行を改ざんして選択できるようにすることです。誰かが順序を変更したり、新しい行を追加したりしても、将来的に壊れる可能性ははるかに低くなります。

于 2013-06-12T18:14:38.930 に答える