非法嵌套：纯文本中的嵌套是非法的答案

【问题标题】：Illegal nesting: nesting within plain text is illegal非法嵌套：纯文本中的嵌套是非法的
【发布时间】：2015-09-27 23:40:37
【问题描述】：

我是 HAML 新手，但遇到错误：Illegal nesting: nesting within plain text is illegal.。目前，我正在尝试将我的 erb 更改为 haml，但它不起作用。这是我的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 %>

我的 HAML 是：

%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" }
    });

怎么了？为什么会出现这个错误？

【问题讨论】：

标签： ruby-on-rails haml

【解决方案1】：

问题出在您的script 标签中：

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

container: "payment-form", 行比前一行缩进更多，Haml 试图将其解析为块或标签的内容，但前一行是纯文本，没有任何一个。

要修复它，您可以使用:javascript filter，它允许在其下方混合缩进：

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

:javascript 过滤器还添加了<script> 标记。如果你有一些理由来控制这个标签的属性，你可以使用 :plain filter 和你自己的标签行：

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

【讨论】：