We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. Volt

Volt block not working with hierarchical view rendering

I'm using the automatic hierarchical view rendering. In my views/index.volt I have a block defined for extra javascript the action view might add:

    <div class="container">
        {{ content() }}
    </div>
    {{ javascript_include('js/bootstrap.min.js') }}
    {{ javascript_include('js/jquery-2.0.3.min.js') }}
    {{ javascript_include('js/knockout-2.3.0.min.js') }}
    {% block scripts %}{% endblock %}
    </body>
</html>

In action view there's a definition for knockout viewmodel:

{% block scripts %}
<script type="text/javascript">
    // ...
</script>
{% endblock %}

But the scripts block ends up being printed with the content before the javascript includes. Have I understood the block usage correctly? Is the block not supported with the automatic hierarchical view rendering and should I explicitly define the inheritance to get it working? Using phalcon 1.2.3.

2


98.9k

In the extended view, you need to set which template must be extended:

{% extends "templates/parent.volt" %}


10
edited Mar '14

It didn't worked for me :(

#app/views/index.volt
# (..)
<script src="{{url("bower_components/jquery/jquery.js")}}"></script>
    <script src="{{url("bower_components/foundation/js/foundation.min.js")}}"></script>
    <script src="{{url("js/app.js")}}"></script>
    {% block extraJs %}

    {% endblock %}

# (..)
#app/views/panel/index.volt
{% extends 'index.volt' %}
    <h4>Simple Test</h4>

{% block extraJs %}
<script type="text/javascript" src="/js/highcharts.js"></script>
<script type="text/javascript" src="/js/modules/exporting.js"></script>
{% endblock %}

I'm receiving the message "Child templates only may contain blocks"

Thanks,



1.5k

I'm sorry, neither works for me. I'm trying this:

The main template

{# views/index.volt #}
<html>
    <head>
        <meta charset="utf-8" />
         {% block header %}        
         {% endblock %}
    </head>
    <body>
        {{ content() }}

        {{ javascript_include("js/jquery-1.11.0.min.js", true) }}

        {% block footer %}        
        {% endblock %}  
    </body>
</html>

The child template

{# views/Users/index.volt #}
{% block header %}
    <style type="text/css">
        .base {
            color: red;
        }
    </style>
{% endblock %}

<section>
    <span>The page content</span>
</section>

{% block footer %}        
    {{ javascript_include("js/page-users.js", true) }}
{% endblock %}

The result

<html>
    <head>
        <meta charset="utf-8">       
    </head>
    <body>
        <style type="text/css">
          .base {
              color: red;
          }
        </style>

        <section>
            <span>The page content</span>
        </section>

        <script type="text/javascript" src="/myapp/js/page-users.js"></script>

        <script type="text/javascript" src="/myapp/js/jquery-1.11.0.min.js"></script>        
    </body>
</html>

As shown the layout blocks and their position are not taking into account when rendering. I'm using version 1.3.0. Please could someone help me with this issue.

Thank you so much.



1.5k

At the end I found the solution, I was mistaken on 4 things:

  1. In the main template I was calling {{ content() }}. Reviwing Phalcon documentation and Twig documentation I found that exists an specific block name to specify the page content {% block content %}{% endblock }}.

  2. In the child template (view template) I must inherit from main template {% extends "index.volt" %}

  3. Set the view render level to LEVEL_ACTION_VIEW
    Ex: $view->setRenderLevel(\Phalcon\Mvc\View::LEVEL_ACTION_VIEW);

  4. Remove the Volt render cache files to test that the main template changes works fine.

Now everything is working properly...

The main template

{# views/index.volt #}
<html>
    <head>
        <meta charset="utf-8" />
         {% block header %}        
         {% endblock %}
    </head>
    <body>
         {% block content %}        
         {% endblock %}

        {{ javascript_include("js/jquery-1.11.0.min.js", true) }}

        {% block footer %}        
        {% endblock %}  
    </body>
</html>

The child template

{% extends "index.volt" %}

{# views/Users/index.volt #}
{% block header %}
    <style type="text/css">
        .base {
            color: red;
        }
    </style>
{% endblock %}

{% block content %}  
<section>
    <span>The page content</span>
</section>
{% endblock %}

{% block footer %}        
    {{ javascript_include("js/page-users.js", true) }}
{% endblock %}

The result

<html>
    <head>
        <meta charset="utf-8">       
        <style type="text/css">
          .base {
              color: red;
          }
        </style>
    </head>
    <body>
        <section>
            <span>The page content</span>
        </section>

        <script type="text/javascript" src="/myapp/js/jquery-1.11.0.min.js"></script>        

        <script type="text/javascript" src="/myapp/js/page-users.js"></script>
    </body>
</html>

For me, this issue has solved.



102

2 Tino D good answer. saved my time