无法在Onsen.io中浏览我的口袋妖怪

问题描述

我正在学习如何使用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>'
                )
            );
        }
    }

}

解决方法

您的代码中有两个问题。

您的api响应包含result，但您想要result.results中可用的口袋妖怪列表，因此您需要致电sendData(result.results)
您正在使用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>

arrays arrays arrays javascript onsen-ui

无法在Onsen.io中浏览我的口袋妖怪

问题描述

解决方法

相关问答