2015-07-12 132 views
2

我正嘗試使用Backbone js來構建一個簡單的聯繫人應用程序來學習backbone.I使用symphony來提供頁面,但是我無法在我的樹枝模板中包含app.js文件。下面是我的文件:在樹枝模板中包含Js

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> 

查看

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

我已經運行在服務器和瀏覽到

http://localhost:8000/index 

控制檯顯示以下錯誤

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

而且在控制檯的源代碼:

<!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> 

這表明在線路

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

最後我的目錄結構是:

Directory structure

編輯: 改變了我的文件結構: enter image description here 而base.html文件改爲

{% 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 %} 

回答

2
  1. 請勿將JavaScript文件放入views文件夾,而應將其放入app/Resources/assets/jsResources/public文件夾中。

  2. 資源Web根目錄使用的情況asset功能:

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

+0

我的項目名稱是ormproject所以應該路徑像 user3437315

+0

您可以看看我的編輯 – user3437315

+0

@ user3437315現在是否適合您?我在我的答案中更新了路徑。 –