时间戳

首页 > 解决方案 > 我无法输出车把模板中的数据

javascript - 我无法输出车把模板中的数据

问题描述

我得到关于异步请求的数据。我将数据传递给函数并将它们按行分解。如何将行传递给模板

async function upComing() {

    const { results } = await $.ajax ("https://api.themoviedb.org/3/movie/upcoming?api_key=******************&language=en-US&page="+numberPage);
    const { genres } = await $.ajax ("https://api.themoviedb.org/3/genre/movie/list?api_key=******************&language=en-US");

    const movies = results.map(({genre_ids, ...rest}) => {
      const filteredIds = genres.filter(gen => genre_ids.includes(gen.id)); 
      const genreNames = filteredIds.map(gen_id => gen_id.name);

      return {
        ...rest,
        genreNames,
      };
    });

    const splittedArray = splitArray(movies);

    function splitArray(arr) {
      var result = [];
      let row = [];
      for (let i = 0; i < arr.length; i++) {
        const rowIndex = result.length;
        const len = rowIndex & 1 ? 2 : 4 ;
        row.push(arr[i]);
        if (row.length === len) {
          result.push(row);
          row = [];
        }
      }
      if (row.length) {
        result.push(row);
      }
      return result;
    }

    const source = document.getElementById("item").innerHTML;
    const template = Handlebars.compile(source);
    const html = template(splittedArray);
    var numberPage = 1;

    $(".content_movie").html(html);

upComing();

标签： javascriptjquerytemplatesasync-awaithandlebars.js

解决方案

我找到了解决方案。有必要做一个助手：

Handlebars.registerHelper ('isEqual', function (v1, v2, options) {
if (v1 === v2) {
return options.fn (this);
}
return options.inverse (this);
});

并更改模板：

{{#each splittedArray}}
        {{#isEqual this.length 4 }}
            <div class="row">
                {{#each .}}
                    <div class="item_4">
                        <div class="container">
                        <a class="buttonFavoriteMovie" data-id="{{id}}" onclick="buttonFavoriteMovie({{id}})" href="/"></a> 
                        <a class="moveMovieInfo" onclick="movieSelected({{id}})" href="/item.html">
                        <img class="poster" src="https://image.tmdb.org/t/p/w300{{poster_path}}" onError="this.src='../img/No_image_available.png'" alt="{{title}}">
                        <h3 class="title">{{title}}</h3>
                        <h4 id="categories">{{genreNames}}</h4>
                        </a>
                        </div>
                    </div>
                {{/each}}      
            </div>
        {{else}}
            <div class="row">
             {{#each .}}
                    <div class="item_2">
                        <div class="container">
                        <a class="buttonFavoriteMovie" data-id="{{id}}" onclick="buttonFavoriteMovie({{id}})" href="/"></a> 
                        <a class="moveMovieInfo" onclick="movieSelected({{id}})" href="/item.html">
                        <img class="poster" src="https://image.tmdb.org/t/p/w300{{poster_path}}" onError="this.src='../img/No_image_available.png'" alt="{{title}}">
                        <h3 class="title">{{title}}</h3>
                        <h4 id="categories">{{genreNames}}</h4>
                        </a>
                        </div>
                    </div>
                {{/each}}
            </div>
        {{/isEqual}}
        {{/each}}

我在这里有一个错误：

 const html = template({splittedArray});
changed to
 const html = template({splittedArray});

推荐阅读