How to Start JS in OnsenUI with Monaca

I recently started using Monaca.It's been 15 years since the program started, so it feels like it's a different world.
I have tried and tried coding to make something like SmartNews based on RSS feed samples provided by Monaca, but I am not able to call JS within OnsenUI due to lack of knowledge.
·Successful screen drawing at startup
·When I tap each article, the action is not conveyed to the function describing Feed
·FeedU does not start with Pull-hook below
It's boiled down in the area where
The description in is different, and I think it may be a few lines of error, but I would appreciate it if you could point it out.

Thank you for your cooperation.

page1.html

<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-buttonng-click="app.slidingMenu.toggleMenu()"<ons-iconicon="bars">/ons-icon><ons-toolbar-button>
        </div>
        <div class="center">Overview</div>
        <div class="right">
            <img src="Logo_h40.jpg" alt="/>
        </div>
    </ons-toolbar>

    <divid="mask">
      <divid="loading"><img src="animation.gif">/div>
    </div>
    <divid="feed-list">
    </div>
    <pid="error-message">/p>
    // FeedU does not run in Pull-hook below (it runs when the screen is generated)
    <ons-pull-hookng-action="$(feedU($done))"var="loader">
        <spanning-switch="loader.getCurrentState()">
            <spanning-switch-when="initial">ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon>Please pull down to update</span>
            <spanning-switch-when="preaction">ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Hands off</span>
            <spanning-switch-when="action">ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
        </span>
    </ons-pull-hook>

</ons-page>

<script>
// CHANGE YOUR URL HERE!
varfeedUrl="http://etc.com/feed/";

$(function($done){
    varmade=new Date();;
    // console.log(made.getTime());
    varfeed = new Feed({
        url —feedURL
    });
    feed.load();
    // $done;

    if(monaca.isIOS){
        $('.toolbar').css('margin-top','20px');
        $('.button') .css('top','20px');
    } 
});

$(function feedU($done){
    varmade=new Date();;
    // console.log(made.getTime() + "feedU";
    varfeed = new Feed({
        url —feedURL
    });
    feed.load();
    $done();
});
</script>

index.html

<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scale=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>ons.bootstrap();</script> 
    <script src="js/feed-reader.js"></script>
</head>
<body>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay"max-slide-distance="200px">
    </ons-sliding-menu>
</body>

monaca onsen-ui

2022-09-29 22:02

2 Answers

OnsenUI is based on AngularJS.
The RSS reader sample uses jQuery, so I think it takes some tips to use it at the same time.

Note: The top two items I searched in AngularJS jQuery...
I want to use jQuery with AngularJS apps
Resolve misunderstandings about angularJS and jQuery

If you want to use ons-pull-hook, it might be easier to customize it based on this.

Use pull hooks (official OnsenUI guide)
Official Guide Sample Source Code (CodePen)

2022-09-29 22:02

In conclusion, the script on the OnsenUI page transition does not seem to work when transitioning to another HTML file.
The reason is that OnsenUI is simply displaying the contents of ons-page (in other files) on index.html.(I don't know exactly what's going on around here, but experience tells me it's like that.)

Therefore, the solution is

Write script on index.html
Write it in a separate JS file and load it in index.html

I think it's good that it's good.

Also, I am an angular party and I am an outsider of jQuery, so I don't know how to implement it in jQuery.

2022-09-29 22:02

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656