Question

搜索几个小时后感觉不好尝试在渲染的Moustache模板上重构我的旧模块之一就像

<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（）中，但仍然无法正常工作和Im试图编写这种模块化且简洁的代码，更喜欢控制模块内部而不是外部的行为，有没有一种方法可以在一行代码或函数中实现此功能，除了setTimeout之外的所有内容？

我尝试过

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

最我想知道专家在这种情况下的工作方式，他们如何保持分隔并仅在一个函数和范围内保持DOM引用，是否有诸如此类或...的中间函数？

我没有头绪请让我知道我想念什么

Answer 1

这是在聊天中回答的：

问题在于您的init函数将渲染一直持续到最后，但是之前的所有方法都希望元素在那里。您的init函数的正确顺序为：

instructor

那样，当cacheDom运行所有let $x := doc("reed.xml")/root/course for $y in distinct-values($x/title) let $z := $x[title = $y]/instructor return ( {data($y)} ,{data($z)})调用时，实际上就会找到元素。

$（document）.ready（）内部的代码尚未准备好

1 个答案: