Nielegalne zagnieżdżanie: zagnieżdżanie w zwykłym tekście jest nielegalne

Question

Jestem nowy w HAML i mam błąd: Illegal nesting: nesting within plain text is illegal.. Obecnie próbuję zmienić mój erb na haml, ale to nie działa. Oto mój erb.

<script src="https://js.braintreegateway.com/v2/braintree.js"></script> 
<h2 class="mbs">New Subscription 
</h2> 
<%= simple_form_for :subscription, :url => subscribe_subscription_path(@plan.id), :id => "checkout-form" do |f| %> 
    <% if current_user and !current_user.has_payment_info? %> 
    <%= render 'customer_form'%> 
    <% end %> 
    <br/> 
    <p> Please enter payment details: </p> 
    <div id="payment-form"></div> 
    <div id="coinbase-container-id"></div> 
    <div class="form-actions"> 
    <%= f.submit t(:subscribe), :class => 'btn btn-primary' %> 
    </div> 
    <script charset="utf-8" type="text/javascript"> 
    var clientToken = "<%= @client_token %>"; 
    braintree.setup(clientToken, "dropin", { 
     container: "payment-form", 
     coinbase: { container: "coinbase-container-id" } 
     }); 
    </script> 
<% end %> 

My haml jest:

%script{:src => "https://js.braintreegateway.com/v2/braintree.js"} 
%h2.mbs 
New Subscription 
= simple_form_for :subscription, :url => subscribe_subscription_path(@plan.id), :id => "checkout-form" do |f| 
    - if current_user and !current_user.has_payment_info? 
    = render 'customer_form' 
    %br/ 
    %p Please enter payment details: 
    #payment-form 
    #coinbase-container-id 
    .form-actions 
    = f.submit t(:subscribe), :class => 'btn btn-primary' 
    %script{:charset => "utf-8", :type => "text/javascript"} 
    var clientToken = "#{@client_token}"; 
    braintree.setup(clientToken, "dropin", { 
     container: "payment-form", 
     coinbase: { container: "coinbase-container-id" } 
    }); 

Co jest nie tak? Dlaczego pojawia się ten błąd?

Answer 1

Problem jest w swojej script tagu:

%script{:charset => "utf-8", :type => "text/javascript"} 
    var clientToken = "#{@client_token}"; 
    braintree.setup(clientToken, "dropin", { 
    container: "payment-form", 
    coinbase: { container: "coinbase-container-id" } 
    }); 

Linia container: "payment-form", jest wcięty więcej niż w poprzedniej kolejce, a haml stara się analizować je jako blok lub jako zawartość znacznika, ale poprzednia linia jest zwykłym tekstem i nie ma żadnej z nich.

Aby rozwiązać go można użyć :javascript filter który pozwala mieszane wcięcia poniżej:

:javascript 
    var clientToken = "#{@client_token}"; 
    braintree.setup(clientToken, "dropin", { 
    container: "payment-form", 
    coinbase: { container: "coinbase-container-id" } 
    }); 

Filtr :javascript dodaje również tag <script>. Jeśli masz jakiś powód, by kontrolować atrybuty tego tagu, możesz użyć :plain filter z własną linią etykiet:

%script{:data => {:example => "Foo"}} 
    :plain 
    var clientToken = "#{@client_token}"; 
    braintree.setup(clientToken, "dropin", { 
     container: "payment-form", 
     coinbase: { container: "coinbase-container-id" } 
    });