在onsen UI 2中通过javascript动态添加新的旋转木马项目_Javascript_Hybrid Mobile App_Onsen Ui_Onsen Ui2

在onsen UI 2中通过javascript动态添加新的旋转木马项目

javascript

在onsen UI 2中通过javascript动态添加新的旋转木马项目,javascript,hybrid-mobile-app,onsen-ui,onsen-ui2,Javascript,Hybrid Mobile App,Onsen Ui,Onsen Ui2,尝试在中通过javascript动态添加新的旋转木马项目，但现在可以正常工作。我使用的代码如下所示 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/> <link

尝试在中通过javascript动态添加新的旋转木马项目，但现在可以正常工作。我使用的代码如下所示

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/>
        <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/>
        <script src="node_modules/onsenui/js/onsenui.js"></script>
        <script src="jquery.js"></script>
    </head>

    <body>
        <ons-splitter>
            <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
                <ons-page>
                    <ons-list>
                        <ons-list-item onclick="fn.load('home.html')" tappable>
                            Home
                        </ons-list-item>
                    </ons-list>
                </ons-page>
            </ons-splitter-side>
            <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
            <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
        </ons-splitter>

        <ons-template id="home.html">
            <ons-page id="home">
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button onclick="fn.open()">
                            <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center top-bar-title"></div>
                    <div class="right">                 
                        <ons-toolbar-button id="addInCarousel">
                            <ons-icon icon="ion-ios-plus, material:md-plus" size="32px, material:24px"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                </ons-toolbar>

                <ons-carousel auto-refresh fullscreen swipeable auto-scroll overscrollable id="itemsCarousel" direction="horizontal">
                    <ons-carousel-item>
                        <img src="images/01.jpg" style="width: 100%; height: auto;"/>                   
                    </ons-carousel-item>                
                    <ons-carousel-item id="caro2">
                        <img src="images/02.jpg" style="width: 100%; height: auto;"/>
                    </ons-carousel-item>                
                </ons-carousel>
            </ons-page>
        </ons-template>

        <script>
            window.fn = {};
            window.fn.open = function() {
                var menu = document.getElementById('menu');
                menu.open();
            };

            window.fn.load = function(page) {
                var content = document.getElementById('content');
                var menu = document.getElementById('menu');
                // content.load(page).then(menu.close.bind(menu));
                document.querySelector('#myNavigator').pushPage(page);
                menu.close();
            };  

            ons.ready(function() {
                var carousel = document.addEventListener('postchange', function(event) {
                    console.log('Changed to ' + event.activeIndex);
                });     
            });

            document.addEventListener("init",function(event) {
                var page = event.target;

                if( page.matches('#home') ) {
                    // set page header title
                    page.querySelector('ons-toolbar .center').innerHTML = 'Testing App';

                    // clicking on header add button for adding new carousel item
                    page.querySelector('#addInCarousel').onclick = function() {
                        console.log("In function");
                        var onsItem= document.createElement('ons-carousel-item');                       
                        onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
                        document.getElementById('itemsCarousel').appendChild(onsItem);
                    };          
                }
            }, false);
        </script>
    </body>
</html>

我用于添加新转盘项目的代码如下：

// clicking on header add button for adding new carousel item
                    page.querySelector('#addInCarousel').onclick = function() {
                        console.log("In function");
                        var onsItem= document.createElement('ons-carousel-item');                       
                        onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
                        document.getElementById('itemsCarousel').appendChild(onsItem);
                    };

请指引我哪里做错了。任何代码示例或web链接都将不胜感激。

您可以将放入并删除的页面属性

我发现这是因为使用了，但两者都不起作用，因为它们都指向home.html和home page初始化了两次，所以可能是因为这个原因，所以它不起作用。那么我如何在我的应用程序中使用拆分器和导航器呢？这是如何在同一页面上使用拆分器和导航器的答案。

<ons-splitter-content id="content">
    <ons-navigator id="myNavigator" page="home.html"></ons-navigator>       
</ons-splitter-content>

page.querySelector('#addInCarousel').onclick = function() {
     console.log("In function");
     var onsItem= document.createElement('ons-carousel-item');                       
     onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';               
     page.querySelector('#itemsCarousel').appendChild(onsItem);
};