Добавление нового элемента карусели динамически с помощью JavaScript в пользовательском интерфейсе onsen 2

Попытка динамически добавить новый элемент карусели с помощью JavaScript в Onsen UI 2, но теперь он работает. Код, который я использую, как показано ниже

<!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);
                    };

Пожалуйста, укажите, где я делаю что-то не так. Любой пример кода или веб-ссылка будет оценена.

Источник

1 ответ

Решение

Вы можете поставить свой <ons-navigator> внутри <ons-splitter-content> и стереть page атрибут <ons-splitter-content>,

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

Это решит инициализацию двух home.html страницы.

Также вы должны переключить document.getElementById("id") метод в вашей функции с page.querySelector("#id") метод, так как позже ищет id на текущей странице.

Поэтому ваша функция должна выглядеть примерно так:

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);
};
Источник
Другие вопросы по тегам