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

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

转载作者：行者123 更新时间：2023-11-28 01:34:05

25

4

我正在尝试从远程服务器获取数据并将其显示在 <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();
        }
    });
}

最佳答案

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/

25

4

0

文章推荐： c++ - 用 2 个指针反转链表

文章推荐： java - jsoup java html解析

文章推荐： javascript - js flipcards 中的故障 - 翻转

文章推荐： c++ - 使用其索引从 vector 中删除对象

onsen-ui - OnsenUI 和 components.onsenui.io
有人可以向我阐明基于 OnsenUI AngularJS 的指令与我可以在 components.onsenui.io 上找到的模式之间的关系吗？我的意思是，当我发现一个有趣的模式时，我应该使用纯
css - 带有 VUE vue-onsenui v-ons-segment 的 OnsenUI 不工作。为什么？
带有 VUE vue-onsenui v-ons-segment 的 OnsenUI 显示不正确，我得到的不是连续的按钮栏，而是标准按钮。代码在修改后的 Monaca CLI 元素中，使用最小的 V
javascript - OnsenUI 显示页面
我的项目有当前设置: 显示横向时显示分割 View ，纵向时显示幻灯片菜单，作为主页，以下内容位于我的 html 中:
angularjs - OnsenUi Angular 和登录
我正在尝试使用 onsen+cordova 开发移动应用我需要的是: 当应用程序启动时，它会加载login.html页面。如果应用程序检测到用户已登录，则会重定向到 home.html 对于每个“
jquery - 如何在 OnsenUI 框架中对列表进行分页
我使用 OnsenUI 和 Justified Gallery 插件在我的混合移动应用程序的列表中显示许多产品。我真正想要的是对每 4 个产品的列表进行分页。我已经尝试了大多数分页 jquery 插件
javascript - OnsenUI pushPage 不加载页面
看来我正在监督某事。我刚开始使用 OnsenUI。我使用了标准的 Tabbar 选项，并没有真正改变 .我的 index.html 中有这个
javascript - onsenui 模态数据绑定(bind)
不确定这是一个 Angular 问题还是一个 onsenui 问题，但这里是...... 我想对 onsenui 模式中的元素进行数据绑定(bind)，如下所示:
javascript - 减小 OnsenUI 的大小
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎是题外话，因为它缺乏足够的信息来诊断问题。更详细地描述您的问题或include a min
javascript - OnsenUi getCurrentPage() 给出空对象
我正在使用 Onsen UI 构建混合移动应用程序，但在两个页面之间导航和传输数据时遇到问题。我的起始页面是index.html，它包含一个 main.html ons-template 和一个ons
css - 在 OnsenUI 中将一个按钮居中放置在另外两个按钮之间
如何在工具栏中将一个按钮居中放置在另外两个按钮之间？这是我的代码和结果截图 My title 我正在使用 OnsenUI
jquery - 更改工具栏 OnsenUi 的颜色
我正在为我的网络应用程序使用 OnsenUi 框架。我需要知道有什么方法可以根据页面的颜色更改工具栏的颜色。也就是说，类似Android 5的工具栏颜色效果。如果可能的话，您能分享一下如何操作的片段
javascript - 在我的 Onsenui 应用程序中添加登录页面
我想在进入主页之前设置一个登录页面。我怎样才能在这条指令之前做到这一点: 我使用 Monaca IDE 感谢帮助查尔斯最佳答案你可以这样试试: index.html
reactjs - OnsenUI Navigator + React 导航失败
由于标题中提到的问题，我已经用头撞墙好几天了。我试图使用 Onsen UI 和 React 来实现导航功能。但是，在我单击导航后，UI 导航到空白页面，并立即返回到第一页。下面是我的代码。 impor
mobile - OnsenUI 与 Ionic 框架
我想开始使用 angularjs、css3 和 html5 开发移动混合应用程序。正在寻找一个框架，并找到了这两个。两者看起来都很好，但是我无法对它们进行很好的比较。谁能列出两者的优缺点。在可扩展性
javascript - onsenui 和 jaydata 不能共存
使用此订单时: 我收到此错误 TypeError: Class.extend is not a function at Object. (onsenui.js:13049)
css - 导航标题中的 OnsenUI 自定义 Logo
Onsen-UI 问题: 如何在 onsen-ui 的左上角(导航部分)显示我的 Logo ？是否有一些属性可以让我知道我想在这里显示 Logo ，如下所示: 在子页面上，我希望在返回导航旁边有 Lo
html - OnsenUI - ion-navicon 不显示图标
这是我试过的。我已经在 span 中给出了这个标签。但是，它没有在导航栏中显示图标。 index.html ons.
javascript - OnsenUI、Angular 和在警报对话框后刷新 UI 组件
我正在使用 Monaca、OnsenUI 和 Angular 开发移动应用程序。在页面中，我有一个可点击项目的列表；当用户点击某个条目时，应出现一个对话框以输入值。该值应显示在点击的列表项中。它确实可
javascript - 无法调用未获取 page.matches OnSenUi 的函数
附加项目HERE 我已经浪费了我的一生(实际上是一周)来解决这个问题。我正处于混合应用程序开发的开始阶段，这件事正在伤害我。我正在 Cordova 工作，并使用 OnSen UI 作为开发应用程序的框
javascript - OnsenUI AngularJS 数据绑定(bind)无法正常工作
我创建了一个我将要执行的操作的简单示例: ons.bootstrap() .controller('AppController', function($scope) { $scope.x

首页

博学

6Ren·AI

商城

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