Question

我正在尝试从远程服务器获取数据并将其显示在<ons-list>上。 append javascript函数不能用于<ons-list>。它在屏幕上不显示任何内容。

这是我的javascript：

function loadCourses() 
    {
        var bugs = $('#courses');

        $.ajax({
            type: 'GET',
            url: '#myserverurlgoeshere',
            dataType: 'JSONp',
            timeout: 5000,
            success: function(data) {
                bugs.append('<ons-list>');
                $.each(data, function(i,item){
                    bugs.append('<ons-list-item class="assgn-list"><h3>'+item.courseName+'</h3><h5>'+item.courseID+'</h5></ons-list-item>');
                });
                bugs.append('</ons-list>');
            },
            error: function(data) {
                bugs.append('<li>There was an error loading the bugs');
            }
        });
    }

继承我的html文件：

<div id="courses">
    <script>loadCourses();</script>
</div>

我希望它显示如下： enter image description here

更新
这是我的index.html文件

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">   
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  <script type="text/javascript" src="js/fetchData.js"></script>


  <script>
    angular.module('myApp', ['onsen.directives']);   

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {        
           yepnope({
              test : window.device.platform === 'iOS' && parseFloat(window.device.version) === 7.0,
              yep  : 'css/ios7.css',
            });
    }

    document.addEventListener("touchstart", function(){}, true);
  </script>
</head>

<body>    
  <ons-screen page="tabbar.html"></ons-screen>
</body>
</html>

我的tabbar.html

<ons-tabbar>
    <ons-tabbar-item active="true" page="page1.html">
        <img class="tabbar-icon" src="images/icons/paperclip.png"/>
        <h5 class="tabbar-text">Assignments</h5>
    </ons-tabbar-item> 

    <ons-tabbar-item page="page2.html">
        <img class="tabbar-icon" src="images/icons/alarm.png"/>
        <h5 class="tabbar-text">Reminders</h5>
    </ons-tabbar-item>

    <ons-tabbar-item page="page3.html">
        <img class="tabbar-icon" src="images/icons/Calendar_icon.png"/>
        <h5 class="tabbar-text">Timetable</h5>
    </ons-tabbar-item> 

    <ons-tabbar-item page="page4.html">
        <img class="tabbar-icon" src="images/icons/Contact_book_icon.png"/>
        <h5 class="tabbar-text">Courses</h5>
    </ons-tabbar-item> 
</ons-tabbar>

我的page4.html

<ons-page class="page center">
    <ons-navigator page="courses.html" title="COURSES"></ons-navigator>
</ons-page>

我的courses.html

<div ng-controller="CoursesPageController">
    <ons-list>
        <ons-list-item ng-show="error">
            There was an error loading the courses
        </ons-list-item>
        <ons-list-item class="assgn-list" ng-repeat="course in courses">
            <h3>{{course.courseName}}</h3>
            <h5>{{course.courseID}}</h5>
        </ons-list-item>
    </ons-list>
</div>

我的fetchData.js

function CoursesPageController($scope){
    $.ajax({
        type: 'GET',
        url: '#myserverurl',
        dataType: 'JSONp',
        timeout: 5000,
        success: function(data) {
                $scope.courses = data;
                $scope.$apply();
        },
        error: function(data) {
                $scope.error = true;
                $scope.$apply();
        }
    });
}

Answer 1

<强> page1.js

function Page1Controller($scope){

    $.ajax({
        type: 'GET',
        url: '#myserverurlgoeshere',
        dataType: 'JSONp',
        timeout: 5000,
        success: function(data) {
                $scope.courses = data;
                $scope.$apply();
        },
        error: function(data) {
                $scope.error = true;
             $scope.$apply();
        }
    });

}

<强> page1.html

<ons-page class="center">
    <div ng-controller="Page1Controller">
        <ons-list>
            <ons-list-item ng-show="error">
                There was an error loading the bugs
            </ons-list-item>
            <ons-list-item class="assgn-list" ng-repeat="course in courses">
                <h3>{{course.courseName}}</h3>
                <h5>{{course.courseID}}</h5>
            </ons-list-item>
        </ons-list>
    </div>
</ons-page>

您可以在此处查看演示http://kruyvanna.github.io/Blog_Demos/onsen_ui/list/app/

以及此处的完整源代码http://kruyvanna.github.io/Blog_Demos/onsen_ui/list/list_demo.zip。

无法使用javascript [OnsenUI]生成ons-list

1 个答案: