Question

主文件：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Teacher</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
  <link rel="stylesheet" href="/css/users.css" >
</head>
<body>
  <div class="wrapper">
    <!-- Page Header -->
    <div class="header">
      <button type="button" class="btn btn-default toggle">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </button>

      <div class="btn-group pull-right">
        <button type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-cog"></span>
          Settings
        </button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#"><b>{{name}}</b></a></li>
          <li role="separator" class="divider"></li>
          <li class="logout"><a href="/sign-in">Logout</a></li>
        </ul>
      </div>
    </div>

    <!-- Left Navbar -->
    <div class="sidebar">
      <ul class="nav">
        <li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span>&emsp;Course Management</span></a></li>
        <li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span>&emsp;Create Course</span></a></li>
      </ul>
    </div>

    <div class="content">
      <div class="container-fluid">
          {{{ body }}}
      </div>
    </div>

  </div>


  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  {{{_sections.handlebars}}}
  {{{_sections.script}}}
  <script src="/js/teacher.js"></script>
</body>
</html>

要添加的模板：

<div class="row">
  <div class="col-md-7">
    <h1>Manage Courses</h1>
    <div class="courses"></div>
  </div>
</div>

<script id="course-template" type="text/x-handlebars-template">
    <div class="panel panel-default">
      <div class="panel-heading">{{coursecode}}</div>
      <div class="panel-body">
        <a href="">{{coursename}}</a>
      </div>
    </div>
</script>

{{#section 'handlebars'}}
  <script src="js/handlebars-v4.0.5.js"></script>
{{/section}}




{{#section 'script'}}
  <script type="application/javascript">
    $(function() {
      let source = $('#course-template').html();
      let template = Handlebars.compile(source);
      console.log(source);
      let placeHolder = $('.courses');
      $.get("/json/courses.json", function(data, status, xhr){
        $.each(data, function(index,element){
          var html = template(element);
          placeHolder.append(html);
        });
      });
    });
  </script>
{{/section}}

要渲染的JSON：

 [
        {
          "coursecode": "ELEC 101",
          "coursename": "Introduction to Electrical engineering"
        },
        {
          "coursecode": "SYSC 102",
          "coursename": "Object-Oriented Programming"
        },
        {
          "coursecode": "ELEC 301",
          "coursename": "Electronics I"
        },
        {
          "coursecode": "SYSC 402",
          "coursename": "Real-Time Systems"
        },
        {
          "coursecode": "BUSI 101",
          "coursename": "Introduction to Business Models"
        },
        {
          "coursecode": "ECON 102",
          "coursename": "Economic paradigms"
        }
    ]

我试图通过ajax读取json文件并显示在主文件上，但页面只显示div而不是文本（coursecode和coursename）。

我想要的。

我得到了什么：

Answer 1

Handerbar可以处理数组本身。无需使用$ .each。只需使用{{#each}} {{/each}}.

渲染所有数组

修改了你的代码，它运行正常。你可以在你的mahine上测试它。我已经使用本地json数组进行渲染。您只需对其进行注释并取消注释$ .get函数，如果您的get函数数据是给定格式的数组，它将完美地工作。

代码如下所示。

   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teacher</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">
    <link rel="stylesheet" href="/css/users.css">
</head>

<body>
    <div class="wrapper">
        <!-- Page Header -->
        <div class="header">
            <button type="button" class="btn btn-default toggle">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
            <div class="btn-group pull-right">
                <button type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-cog"></span> Settings
                </button>
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#"><b>{{name}}</b></a></li>
                    <li role="separator" class="divider"></li>
                    <li class="logout"><a href="/sign-in">Logout</a></li>
                </ul>
            </div>
        </div>
        <!-- Left Navbar -->
        <div class="sidebar">
            <ul class="nav">
                <li><a href="/teacher"><i class="glyphicon glyphicon-lock"></i><span>&emsp;Course Management</span></a></li>
                <li><a href="/teacher/createCourse"><i class="glyphicon glyphicon-film"></i><span>&emsp;Create Course</span></a></li>
            </ul>
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-7">
                        <h1>Manage Courses</h1>
                        <div class="courses"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/handlebars-v4.0.5.js"></script>
    <script type="application/javascript">
    $(function() {


    /* for local use only  to test */
        var data = [
        {
          "coursecode": "ELEC 101",
          "coursename": "Introduction to Electrical engineering"
        },
        {
          "coursecode": "SYSC 102",
          "coursename": "Object-Oriented Programming"
        },
        {
          "coursecode": "ELEC 301",
          "coursename": "Electronics I"
        },
        {
          "coursecode": "SYSC 402",
          "coursename": "Real-Time Systems"
        },
        {
          "coursecode": "BUSI 101",
          "coursename": "Introduction to Business Models"
        },
        {
          "coursecode": "ECON 102",
          "coursename": "Economic paradigms"
        }
    ];
        let source = $('#course-template').html();
        let template = Handlebars.compile(source);
        let placeHolder = $('.courses');

        var html = template(data);
        placeHolder.append(html);

    /* test code ends here */

 /* uncomment below code and comment test code */

        // $.get("/json/courses.json", function(data, status, xhr) {
            // let source = $('#course-template').html();
            // let template = Handlebars.compile(source);
            // let placeHolder = $('.courses');

            // var html = template(data);
            // placeHolder.append(html);
        // });
    });
    </script>
    <script id="course-template" type="text/x-handlebars-template">
        <div class="panel panel-default">
            {{#each this }}
                <div class="panel-heading">{{coursecode}}</div>
                <div class="panel-body">
                    <a href="">{{coursename}}</a>
                </div>
            {{/each }}
        </div>
    </script>
</body>

</html>

把手模板渲染html没有内容

1 个答案: