Question

我正在使用把手和快递。我想根据用户选择的复选框显示导师列表以及其他导师详细信息。我正在使用ajax调用从工作正常的服务器上获取教师列表，但是我无法显示特定部分的所有那些教师列表。

用户单击复选框后，就会触发ajax调用，从而在服务器端触发api。在服务器端，我查询数据库中的导师集合，并获取所需的导师，并将其发送回ajax函数。我正在找补习老师，但是我不能在页面的特定部分显示补习老师。

 //this is the ajax call 
 function searchtutor(x) {
$.get('/findtutor/find_tutor?search=' + JSON.stringify(x), function (data,
    status) {
    console.log(data);
});
 }


  //this is the server side 
  router.route('/find_tutor')
.get((req, res) => {
    var tutorChunks = [];
    var chunkSize = 3;
    console.log('query is' + req.query.search);
    if (req.query.search) {
        var query = JSON.parse(req.query.search);
        tutor.find(JSON.parse(req.query.search), function (err, docs) {
            for (var i = 0; i < docs.length; i +=
                chunkSize) {
                tutorChunks.push(docs.slice(i, i +
                    chunkSize));
                console.log(tutorChunks);
            }

            if (req.isAuthenticated()) {
                res.render('find_tutor', {
                    tutors: tutorChunks,
                    username: req.user.username
                });
            } else {
                console.log(tutorChunks);
                res.send(tutorChunks);
            }
        });
    } else {
        res.render('find_tutor');
    }


});


   //this is the section where I want to populate the tutors
{{# each tutors}}
  {{# each this}}
        <div id="tutorscolumn" class="col-sm-4 col-md-4">
            <div  class="card" style="width:225px">
                <img class="card-img-top" src="/images/{{this.image}}" alt="Card image" style="width:100%">
                <div  class="card-body tutor-card-body">
                    <h4 id="card-title" style="color: #134477;" class="card-title">{{this.firstname}} {{this.lastname}}</h4>
                    <p id="card-text" style="color:#91959a;" class="card-text">{{this.subjects}}</p>
                    <button onclick="location.href='/users/view_tutor?email={{this.email}}'" class="view_tut_btn button btn btn-lg" type="button">View Tutor</button>
                </div>
            </div>
        </div>
  {{/each}}
  {{/each}}

Answer 1

用一些jQuery替换console输出以显示已编译的模板输出应该可以解决问题：

var template = Handlebars.compile(`
  ... template content here ...
`)

function searchtutor(x) {
  $.get("/findtutor/find_tutor?search=" + JSON.stringify(x), function(
    data,
    status
  ) {
    $('#tutors').html(template(data))
  });
}

下面的示例片段带有伪造的数据。我假设您在其中有一个嵌套数组，原因是：

{{# each tutors}}
{{# each this}}

图像显然会坏掉，但希望您能理解！

var template = Handlebars.compile(`
{{# each tutors}}
{{# each this}}
<div id="tutorscolumn" class="col-sm-4 col-md-4">
  <div class="card" style="width:225px">
    <img
      class="card-img-top"
      src="/images/{{ this.image }}"
      alt="Card image"
      style="width:100%"
    />
    <div class="card-body tutor-card-body">
      <h4 id="card-title" style="color: #134477;" class="card-title">
        {{ this.firstname }} {{ this.lastname }}
      </h4>
      <p id="card-text" style="color:#91959a;" class="card-text">
        {{ this.subjects }}
      </p>
      <button
        onclick="location.href='/users/view_tutor?email={{ this.email }}'"
        class="view_tut_btn button btn btn-lg"
        type="button"
      >
        View Tutor
      </button>
    </div>
  </div>
</div>
{{/each}}
{{/each}}
`)

function searchtutor(x) {
  //  $.get("/findtutor/find_tutor?search=" + JSON.stringify(x), function(
  //  data,
  //  status
  //  ) {
  //    $('#tutors').html(template(data))
  // });
  $('#tutors').html(template(dummyTutors))
}

var dummyTutors = {
  tutors: [
    [{
      id: 1,
      image: '',
      firstname: 'Gertrude',
      lastname: 'McWombat',
      email: 'gertrude@example.com',
      subjects: 'Wombats'
    },
    {
      id: 1,
      image: '',
      firstname: 'Gershwin',
      lastname: 'Aardvarkson',
      email: 'gershwin@example.com',
      subjects: 'Aardvarks'
    },
    {
      id: 1,
      image: '',
      firstname: 'Gerald',
      lastname: 'Xebublip',
      email: 'gerald@example.com',
      subjects: 'Xebus'
    }]
  ]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" onClick="searchtutor('ger')" name="search">
<label for="search">Search</label>
<div id="tutors"></div>

我正在使用ajax调用从服务器获取json数据，如何将这些数据填充到我的车把部分？

1 个答案: