在树枝模板中包含Js

时间:2015-07-12 10:09:33

标签: javascript symfony backbone.js twig

我正在尝试使用Backbone js构建一个简单的联系人应用程序来学习backbone.I我正在使用symphony来提供页面。但是我无法在我的twig模板中包含app.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 %}

1 个答案:

答案 0 :(得分:2)

  1. 请勿将您的JavaScript文件放入Public Class Form1 Dim A As Integer Dim B As Integer Dim C As Integer Dim Det As Double Dim x1 As Double Dim x2 As Double Private Sub txtA_Click(sender As Object, e As EventArgs) Handles txtA.Click txtA.Text = InputBox("Please, enter value of the variable A.", "Enter A") End Sub Private Sub txtB_Click(sender As Object, e As EventArgs) Handles txtB.Click txtB.Text = InputBox("Please, enter value of the variable B.", "Enter B") End Sub Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load End Sub Private Sub cmdCalculate_Click(sender As Object, e As EventArgs) Handles cmdCalculate.Click A = Val(txtA.Text) B = Val(txtB.Text) C = Val(txtC.Text) Det = B ^ 2 + 4 * A * C If Det > 0 Then x1 = (-B + Math.Sqrt(Det)) / (2 * A) x2 = (-B - Math.Sqrt(Det)) / (2 * A) MsgBox("The roots are " + x1 + " and " + x2 + " ! ", 64, "2 Roots") ElseIf Det = 0 Then x1 = -B / (2 * A) MsgBox("The roots are " + x1 + " ! ", 64, "1 Double Root") ElseIf Det < 0 Then MsgBox("No roots ! ", 64, "No Roots") End If End Sub Private Sub txtC_Click(sender As Object, e As EventArgs) Handles txtC.Click txtC.Text = InputBox("Please, enter value of the variable C.", "Enter C") End Sub Private Sub cmdExit_Click(sender As Object, e As EventArgs) Handles cmdExit.Click End End Sub Private Sub cmdClear_Click(sender As Object, e As EventArgs) Handles cmdClear.Click txtA.Text = "" txtB.Text = "" txtC.Text = "" End Sub 文件夹,而是将其放入捆绑包的viewsapp/Resources/assets/js文件夹中。

  2. 对于Web根以外的资源,请使用Resources/public函数:

  3. asset