将 Jquery 与 Twig 一起使用

lholland421

2016-03-07

12992

我正在尝试将 J 查询与 tiwg 一起使用，并且有一些文件需要包含在 html 模板中。我有一个 base.html 模板，然后由其他模板扩展，如下所示。每次我添加对所需 JQuery 脚本的引用时，页面都不会加载。我一定做错了什么。

谢谢

 {% extends "base.html" %}

    {% block content %}
    <!-- page content -->

    {% endblock %}
    {% block javascripts %}
        <script type="text/javascript" src="{{ assets('js/jquery.min.js') }}"></script>
        <script type="text/javascript" src="{{ assets('js/wizard/jquery.smartWizard.js') }}"></script>

    {% endblock %}

我已将 jquery 添加到页面顶部而不是底部，但我仍然无法让 jquery 智能向导工作，这是我的代码。对 jquery 的引用在 base.html 中

{% extends "base.html" %}

{% block content %}
<!-- page content -->

<div class="row">
 <div id="wizard" class="swMain">
  <ul>
    <li><a href="#step-1">
          <label class="stepNumber">1</label>
          <span class="stepDesc">
             Step 1<br />
             <small>Step 1 description</small>
          </span>
      </a></li>
    <li><a href="#step-2">
          <label class="stepNumber">2</label>
          <span class="stepDesc">
             Step 2<br />
             <small>Step 2 description</small>
          </span>
      </a></li>
    <li><a href="#step-3">
          <label class="stepNumber">3</label>
          <span class="stepDesc">
             Step 3<br />
             <small>Step 3 description</small>
          </span>                   
       </a></li>
    <li><a href="#step-4">
          <label class="stepNumber">4</label>
          <span class="stepDesc">
             Step 4<br />
             <small>Step 4 description</small>
          </span>                   
      </a></li>
  </ul>
  <div id="step-1">   
      <h2 class="StepTitle">Step 1 Content</h2>
       <!-- step content -->
  </div>
  <div id="step-2">
      <h2 class="StepTitle">Step 2 Content</h2> 
       <!-- step content -->
  </div>                      
  <div id="step-3">
      <h2 class="StepTitle">Step 3 Title</h2>   
       <!-- step content -->
  </div>
  <div id="step-4">
      <h2 class="StepTitle">Step 4 Title</h2>   
       <!-- step content -->                         
  </div>
</div>                   

 </div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="assets/js/wizard/jquery.smartWizard.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard
        $('#wizard').smartWizard();
  }); 
</script>

{% endblock %}

jquery , twig

Using Jquery with Twig

原文答案

答案:

Carlos Delgado

2016-03-07 0 原文

这是使用 symfony 和 twig 渲染模板时的一个已知问题：

请注意，您的内容是在您的 javascript 块之前呈现的！

您的 base.html 文件应如下所示：

<!DOCTYPE>
<html>
   <head>
     <!-- Here your css files and jQuery-->
     <script type="text/javascript" src="{{ assets('js/jquery.min.js') }}"></script>
   </head>
   <body>
     {% block content %}
     {# 
        The content of other files will be rendered here !
        That means you need to include jQuery before this point
        in your base.html
      #}

     {% endblock %}
    </body>
{% block javascripts %}
    {#if you include jquery here, the scripts that need jquery will fail because jquery exists since this point !#}
    <script type="text/javascript" src="{{ assets('js/wizard/jquery.smartWizard.js') }}"></script>

{% endblock %}
</html>

然后在任何扩展文件中，您都可以执行 jQuery。

注意：如果您的 base.html.twig 文件中有一个现有的 javascript 块，那么您不能在扩展视图中创建另一个，因为内容将被替换（使用 {{parent()}}解决这个问题，阅读 here )

Mario Radomanana

2016-03-09 0 原文

更新

我认为主要的错误是你在资产调用中有一个“s”。

它应该是没有“s”的资产

{{ asset('js/jquery.min.js') }}

代替

{{ assets('js/jquery.min.js') }}

假设在 base.html.twig 中调用 jquery，当您在模板中覆盖它时，您可以使用 {{ parent() }} 来获取块 javascripts 的初始内容

所以，你的 base.html 是这样的

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/jquery.min.js') }}"></script>
{% endblock %}

以及扩展 base.html 的模板

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('js/wizard/jquery.smartWizard.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize Smart Wizard
            $('#wizard').smartWizard();
        }); 
    </script>
{% endblock %}

将 Jquery 与 Twig 一起使用

答案:

更新

相关问题

标签