$(document).ready()中的代码尚未准备好

Question

搜索数小时后感觉不好试图在渲染的Mustache模板上重构我的一个旧模块它就像

<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之外的所有东西

I事件尝试

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

大部分我想知道专业人士在这种情况下会做什么，他们是如何保持分离并将DOM引用仅限于一个函数和范围的，有没有类似的中间函数或。。。

我不知道请让我知道我错过了什么，谢谢

Answer 1

这是在聊天中回答的：

问题是，init函数将渲染留到最后，但在此之前的方法都希望元素在那里。init函数的正确顺序是：

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

这样，当cacheDom运行时，所有this.$el.find调用实际上都会找到元素。