我正在尝试从远程服务器获取数据并将其显示在 <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>
我希望它显示如下:
更新
这是我的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();
}
});
}
最佳答案
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 - 无法使用 javascript 生成 ons-list [OnsenUI]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21746049/