无法在 Onsen.io 中循环播放我的口袋妖怪

Question

我正在学习如何使用 onsen.io，最好的学习方法是制作 Pokemon 应用！

当然，作为一个菜鸟，我在尝试使用 onsen.io 遍历我的 151 个口袋妖怪列表时遇到了麻烦。我可以 console.log 151 的列表，但我不确定在 ons-list 中显示它缺少什么。

我是不是循环不正确？

谢谢！

这是我的代码：

<ons-navigator id="myNavigator" page="main-temp"></ons-navigator>
            
        <!-- ******************** main-template ******************** -->

            <template id="main-temp">
            <ons-page id="main-page">
              
                   <ons-toolbar style="background-color: red;">
                    <div class="center" style="color: #fff;">Pokedex</div>
                  </ons-toolbar>

          </ons-page>
           </template>

    <!-- ******************** list template ******************** -->
    <template id="list-temp">
        <ons-page id="list-page">
            <div class="content content-container">                   
            
            <ons-list id="list-item"></ons-list>
        </div>
        </ons-page>
    </template>

    <!-- ******************** spinner modal ******************** -->

    <ons-modal id="spinner-modal">
        <div style="margin: auto;">
            <ons-icon icon="md-spinner" size="100px" spin></ons-icon>
        </div>
    </ons-modal>

window.onload = function (){

        var spinnerModal = document.querySelector('#spinner-modal');
        spinnerModal.show();    

    var settings = {

        "url":`https://pokeapi.co/api/v2/pokemon?limit=151`,
        "method": "GET",
        "timeout": 0,
        };
    $.ajax(settings)
    .done(function(result){
        sendData(result);
        
        let results = result;
        console.log(results);
                      
    })
    .fail(function(xhr, status, error){
        console.log('error:' + xhr.status);
    
    }) 
    .always(function(){
    
        spinnerModal.hide();
    })   

    function sendData(jsonData){
      
        var itemsList = document.getElementById('list-item');
        for(let i = 1; i < jsonData.length; i++){     
                     
            itemsList.appendChild(
                ons.createElement(
                    '<ons-card class="inside-cards">'+
                    '<ons-list>' +
         
                    '<ons-list-item modifier="tappable>' + 
                        '<div class="left" >' + 
                        jsonData[i].name +
                        '</div>' +
                        '<div class="" style="margin-left:20px;" >' +
                            '<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
                            '<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
                            '<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name +  "<br><br>" +
                        '</div>' + 
                        
                        '<div>' +
                        '</div>' +
                    '</ons-list-item>' +
                    '</ons-list>' +
                    '</ons-card>'
                )
            );
        }
    }

}

Answer 1

你的代码有两个问题。

1. 您的 api 响应包含result，但您需要在result.results 中提供的口袋妖怪列表，因此您需要致电sendData(result.results)
2. 您正在使用template 标记，它创建了一个名为documentFragment 的不同文档范围。同样在模板中，id 表示您要在应用程序中作为模板呈现的 HTML 页面，因此 id 应定义为 id='something.htm'。更多详情请阅读ons-template

正确使用模板

<template id="page.html">
</template>

or

<ons-splitter>
  <ons-splitter-content page="page.html">
  </ons-splitter-content>
</ons-splitter>

在在线编辑器中显示这一点有点困难，因为在线编辑器只提供一个 HTML。让我看看我是否有时间在 plunkr/stackblitz 在线编辑器中执行此操作，或者我希望您从 ons documentation 中弄清楚这一点。

ons.ready(function() {

  var spinnerModal = document.querySelector('#spinner-modal');
  spinnerModal.show();

  var settings = {

    "url": `https://pokeapi.co/api/v2/pokemon?limit=151`,
    "method": "GET",
    "timeout": 0,
  };
  $.ajax(settings)
    .done(function(result) {
      sendData(result.results); // result.results contains pokemon list :)

      let results = result;
      console.log(results);

    })
    .fail(function(xhr, status, error) {
      console.log('error:' + xhr.status);

    })
    .always(function() {

      spinnerModal.hide();
    })

  function sendData(jsonData) {
    debugger;
    var itemsList = document.getElementById('list-item'); // this is no longer null since this is no longer part of template.
    for (let i = 1; i < jsonData.length; i++) {

      itemsList.appendChild(
        ons.createElement(
          '<ons-card class="inside-cards">' +
          '<ons-list>' +

          '<ons-list-item modifier="tappable>' +
          '<div class="left" >' +
          jsonData[i].name +
          '</div>' +
          '<div class="" style="margin-left:20px;" >' +
          '<ons-icon icon="fa-hashtag"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '<ons-icon icon="fa-thumbs-up"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '<ons-icon icon="fa-user"></ons-icon>' + ' ' + jsonData[i].name + "<br><br>" +
          '</div>' +

          '<div>' +
          '</div>' +
          '</ons-list-item>' +
          '</ons-list>' +
          '</ons-card>'
        )
      );
    }
  }

})

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <ons-navigator id="myNavigator" page="main-temp"></ons-navigator>

  <!-- ******************** main-template ******************** -->

  <template id="main-temp">
            <ons-page id="main-page">
              
                   <ons-toolbar style="background-color: red;">
                    <div class="center" style="color: #fff;">Pokedex</div>
                  </ons-toolbar>

          </ons-page>
           </template>

  <!-- ******************** list template ******************** -->


  <ons-page id="list-page">
    <div class="content content-container">
      <ons-list id="list-item"></ons-list>

    </div>
  </ons-page>
  <!-- ******************** spinner modal ******************** -->

  <ons-modal id="spinner-modal">
    <div style="margin: auto;">
      <ons-icon icon="md-spinner" size="100px" spin></ons-icon>
    </div>
  </ons-modal>
</body>

</html>