код внутри $ (document) .ready () не готов - PullRequest
Новая
       13

код внутри $ (document) .ready () не готов

0 голосов
/ 04 декабря 2018

чувствую себя плохо после нескольких часов поиска, пытаясь реорганизовать один из моих старых модулей на отрисованном шаблоне усов. Это похоже на 

<section id="slideShow">
    <script id="slideShow-template" type="text/template">
        <ul>
            {{#slideShow}}
            <li class="{{{class}}}">
                <img src="{{{img}}}" alt="{{{title}}}">
                <a href="{{{link}}}">
                    <h1 class="slideShowTitle">{{title}}</h1>
                    <p class="slideShowDate">{{date}}</p>
                    <p class="slideShowDetail">{{detail}}</p>
                </a>
            </li>
            {{/slideShow}}
        </ul>
        <nav>
            {{#slideShow}}
                <a href="javascript:;"></a>
            {{/slideShow}}
        </nav>
        <a href="javscript:void(0)" class="prevSlide"></a>
        <a href="javscript:void(0)" class="nextSlide"></a>

    </script>
</section>

и js 

(function() {

        var slideShow = {
            slideShow: [
                ...some data...
            ],

            init: function() {
                this.cacheDom();
                this.initPosition();
                this.bindEvents();
                this.render();
            },

            bindEvents: function() {
                this.$el.on('click', '.nextSlide', this.nextSlide.bind(this))
            },

            render: function() {
                var data = {
                    slideShow: this.slideShow
                };
                this.$el.html(Mustache.render(this.template, data));
            },

            cacheDom: function() {
                this.$el = $('#slideShow');
                this.$ul = this.$el.find('ul');
                this.$li = this.$ul.find('li');
                this.$nav = this.$el.find('nav');
                this.$a = this.$nav.find('a');
                this.$next = this.$el.find('.nextSlide');
                this.$prev = this.$el.find('.prevSlide');
                this.template = $('#slideShow-template').html();

            },

            initPosition: function() {
                 this.$ul.css('left', '0');
            },

            nextSlide: function() {
                alert('test OK');
            }

        };

        slideShow.init();

    })();

проблемаФункция initPosition () не дает динамическому элементу стиль CSS, я даже обернул весь код в $ (document) .ready (), но он все еще не работает, и я пытаюсь написать это модульно и чисто, предпочитаю контролировать поведение внутримодуля не снаружи, есть ли способ добиться этого в одной строке кода или функции, все, кроме setTimeout?

Я попытался событие 

this.$el.on('ready', 'ul', somefunc(){....})

Чаще всего я хочузнать, что делают профессионалы в этой ситуации, как они поддерживают разделение и сохраняют свои DOM-ссылки только в одной функции и области действия, есть ли какая-нибудь средняя функция для чего-то подобного или ...

Понятия не имею, пожалуйста, дайтея знаю, что мне не хватает, спасибо

1 Ответ

0 голосов
/ 04 декабря 2018

На этот вопрос ответили в чате:

Проблема в том, что ваша функция init оставляет рендеринг до последнего, но все методы до этого ожидают, что элементы будут там.Правильный порядок для вашей функции инициализации: 

init: function() {
  this.render();
  this.cacheDom();
  this.initPosition();
  this.bindEvents();
},

Таким образом, когда cacheDom запускает все вызовы this.$el.find, на самом деле найдут элементы.

...