CODEWITHSUNDEEP
javascriptsymfonybackbone.jstwig
user3437315
user3437315

Reputation: 270

Including Js in twig template

I am trying to build a simple contacts app using Backbone js to learn backbone.I am using symphony to serve the page.But i am not able to include the app.js file in my twig template.Here are my files :

index.html.twig

{% extends 'base.html.twig' %}

    {% block javascripts %}
      {{ parent() }}
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
      <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
      <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

    {% endblock %}
    {% block body %}
      <meta charset="UTF-8" />
      <title>Backbone.js Web App changed</title>


      <div id = 'contacts'>
      <script id = "contactTemplate" type="text/template">
        <img src = "<%= photo %>" alt ="<%= name %>">
        <h1>Name : <%= name %><span><%= type %></span></h1>
        <div><%= address%></div>
        <dl>
          <dt>Tel: </dt><dd> <%= tel%></dd>
          <dt>Email: </dt><dd> <%= email%></dd>
        </dl>
      </script>
      </div>
  {% endblock %}

base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>


        {% block javascripts %}
            <script src="{{ asset('js/app.js') }}"></script>
            <script src="{{ asset('js/json2.js') }}"></script>
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}

    </body>
</html>

View

/**
 * @Route("/index", name="index")
 */
public function indexPage()
{
  return $this->render('default/index.html.twig');
}

I have run the server and navigated to 

http://localhost:8000/index

THe console shows the following error

Get http://localhost:8000/js/app.js
Get http://localhost:8000/js/json2.js

And the source code in console is :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Welcome!</title>


                          <script src="/js/app.js"></script>
                          <script src="/js/json2.js"></script>

      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
      <script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
      <script src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

        </head>
    <body>
              <meta charset="UTF-8" />
      <title>Backbone.js Web App changed</title>


      <div id = 'contacts'>






      <script id = "contactTemplate" type="text/template">
        <img src = "<%= photo %>" alt ="<%= name %>">
        <h1>Name : <%= name %><span><%= type %></span></h1>
        <div><%= address%></div>
        <dl>
          <dt>Tel: </dt><dd> <%= tel%></dd>
          <dt>Email: </dt><dd> <%= email%></dd>
        </dl>
      </script>
      </div>
  </body>
</html>

It shows error at line 

  <script src="/js/app.js"></script>
  <script src="/js/json2.js"></script>

And finally my directory structure is :

Directory structure

EDIT : Changed my file structure : enter image description here And base.html changed to

{% block javascripts %}
            <script src="{{ asset('ormproject/app/Resources/assets/js/app.js') }}"></script>
            <script src="{{ asset('ormproject/app/Resources/assets/js/json2.js') }}"></script>
        {% endblock %}

Upvotes: 3

Views: 10719

Answers (1)

Konstantin Pereiaslov
Konstantin Pereiaslov

Reputation: 1814

  1. Don't put your JavaScript files into views folder, put it into app/Resources/assets/js or in Resources/public folder of your bundle instead.

  2. For resources outside of web root use asset function:

<script src="{{ asset('projectname/app/Resources/assets/js/app.js') }}">

Upvotes: 2

Related Questions