Framework7 Как получить HTML с тегами Template7, прежде чем страница будет инициализирована - PullRequest
Новая
       21

Framework7 Как получить HTML с тегами Template7, прежде чем страница будет инициализирована

0 голосов
/ 26 июня 2019

Я использую Framework7 версии 3.

Я просто пытаюсь получить HTML-код template7 элемента ul #notifications_list. Поэтому я могу повторно использовать существующий HTML в бесконечной прокрутке. Как этот билет в stackoverflow. . Я попробовал этот метод, но не уверен, почему он не работает. Однако я попробовал с pageBeforeIn методом. Но все же с этим методом я получаю полный html с реальными данными, а не template7 html.

Здесь я создал свой собственный шаблон Template7, который работает нормально, но я хотел бы использовать тот же HTML, который я создал внутри страницы. 

<script id="notifications_template" type="text/template7">
          .......
</script>

Мой код 

    <template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link back"> <i class="fa fa-angle-left fa-2x"></i> <span class="if-not-md">Back</span> </a>
                </div>
                <div class="page-title sliding">Notifications</div>
                <div class="right">&nbsp;</div>
            </div>
        </div>
        <div class="page-content profile-content infinite-scroll-content_notifications">
            <div id="notifications_wrap">
                <div class="list media-list chevron-center">
                    {{#if notificationList}}
                    {{#notificationList}}
                    <ul class="" id="notifications_list">
                        {{> "notifications"}}
                    </ul>
                    {{/notificationList}}
                    {{/if}}
                </div>
            </div>
            <div class="preloader infinite-scroll-preloader"></div>
        </div>


    </div>
</template>




<script>
  return {
    data: function () {
        return {
            notificationList: null,
        }
    },

    on: {
        pageBeforeIn: function (event, page) {
          console.log(page)
          var notificationsTemplate = Template7.compile($(page.el.innerHTML).find("ul#notifications_list").html());
          console.log({notificationsTemplate})
        },

        pageInit: function () {
            var self = this;
            var app = self.$app;
            Notifications.lastItemIndex = 0;
            Notifications.offset = 0;
            Notifications.get(function(res){
                if(res.status == "success") {
                    var notificationData= res.data;
                    Notifications.max_notification_item = res.data.totalResult;
                    self.$setState({notificationList:notificationData});
                    Notifications.lastItemIndex = $('#notifications_list li').length;
                    if (Notifications.lastItemIndex >= Notifications.max_payment_item) {
                        app.infiniteScroll.destroy('.infinite-scroll-content_notifications');
                        $('.infinite-scroll-preloader').remove();
                        return;
                    }

                }
            });
        $('.infinite-scroll-content_notifications').on('infinite', function () {
              // Exit, if Notifications.loading in progress
              if (!Notifications.loading) return;
              Notifications.loading = false;
              setTimeout(function () {
                Notifications.loading = true;
                if (Notifications.lastItemIndex >= Notifications.max_payment_item) {
                    app.infiniteScroll.destroy('.infinite-scroll-content_notifications');
                    $('.infinite-scroll-preloader').remove();
                    return;
                }
                Notifications.get(function(res){
                    if(res.status == "success") {
                        var notificationData = res.data;
                        // below line should get the template code which I have manually created. 
                        var template = $('#notifications_template').html();
                        var compiledTemplate = Template7.compile(template);
                        $("#notifications_list").append(compiledTemplate(notificationData));
                        Notifications.lastItemIndex = $('#notifications_list li').length;
                    }
                });

              },1000)
            });


        },


    },
  };
</script>

Можно ли как-нибудь извлечь этот HTML, чтобы я мог использовать его рекурсивно.

...