1

我想 ember.js 使用 jquery 选项卡滑块，这是我的视图，我实现了didInsertElement钩子，但这似乎有问题

Ember.Slider = Em.View.extend
    template: Ember.Handlebars.compile([
        " <div id='top_press_banner'> "
        "   <ul class='switcher'> "
        "     {{#each topFive  itemController='new'}} "
        "       <li {{bindAttr tabslider-ref='this.id'}}>{{this.title}}</li> "
        "     {{/each}} "
        "   </ul> "
        "   {{#each topFive itemController='new'}} "
        "     <div {{bindAttr tabslider-name='this.id'}}> "
        "       <img {{bindAttr src='this.zoomTopFiveCover'}}> "
        "       <div class='item-caption'> "
        "         <h4>{{title}}</h4> "
        "         <p>{{description}}</p> "
        "       </div> "
        "     </div> "
        "   {{/each}} "
        " </div> "
        ].join("\n"))
    didInsertElement: ->
        console.log @$().html()
        $("#top_press_banner").tabSlider()

topFive是控制器中的一个数组

输出日志：

<div id="top_press_banner"> 
<ul class="switcher"> 
    <script id="metamorph-1-start" type="text/x-placeholder"></script>      <script id="metamorph-1-end" type="text/x-placeholder"></script> 
 </ul> 
 <script id="metamorph-2-start" type="text/x-placeholder"></script> <script id="metamorph-2-end" type="text/x-placeholder"></script> 
</div>

tabSlider调用方法的时候，$ ("# top_press_banner")里面的html还没有插入到dom中，谁告诉我改了怎么办？

4

1 回答 1

0

尝试afterRender在 Ember 运行循环中使用队列。在这里寻找解释：http: //mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

App.YourView = Ember.View.extend({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, function(){
        // perform your jQuery logic here
    });
  }
});

PS：代码突出显示似乎不适用于移动设备。

于 2013-08-04T11:37:19.667 回答