结合Twig使用Jquery

cld4siwp 于 2023-01-25 发布在 jQuery

关注(0)|答案(2)|浏览(151)

我正在尝试使用jquery和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

来源：https://stackoverflow.com/questions/35845484/using-jquery-with-twig

2条答案

按热度按时间

o4hqfura1#

这是使用symfony和twig渲染模板时的已知问题：
1.注意你的内容在你的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块，则您无法在扩展视图中创建另一个javascript块，因为内容将被替换（使用{{parent（）}}解决此问题，请阅读here）

赞(0）回复(0）举报 2023-01-25

yptwkmov2#

更新

我认为主要错误是您在资产调用中有一个"s"。
应该是没有"s"的资产

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

代替

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

假设jquery是在base.html.twig中调用的，那么当您在模板中覆盖块javascript时，可以使用{{parent（）}}来获取块javascript的初始内容
所以，你的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 %}

赞(0）回复(0）举报 2023-01-25

我来回答

结合Twig使用Jquery

2条答案

更新

相关问题

热门标签

最新问答