Question

我在异步请求中获取数据。我将数据传递给函数，然后将它们分成几行。如何将行传递到模板

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();

Answer 1

我找到了解决方案。有必要提供帮助：

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});

Answer 2

由于

，我一直在尝试解决您的问题，但找不到正确的答案

输入：

Search:(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

输出：

result : Array(3)
   0: (4) [{…}, {…}, {…}, {…}]
   1: (2) [{…}, {…}]
   2: (4) [{…}, {…}, {…}, {…}]

但是我已经修复了一些错误，但我仍然不明白您尝试实现什么目标？我认为这是不可能的，因为您需要提供这样的对象名称：

{
  people: [
   {firstName: "Yehuda", lastName: "Katz"},
   {firstName: "Carl", lastName: "Lerche"},
   {firstName: "Alan", lastName: "Johnson"}
  ]
}

何时可以使用模板，例如：

<script id="template" type="text/x-handlebars-template">
  {{#each result}}<article>
    <h4>{{Title}} <small>({{Year}})</small></h4>
  </article>
{{/each}}
</script>

这是我所做的事情，看起来a link to the code

我无法在车把模板中输出数据

2 个答案: