0

我有一个 Foundation Orbit 图像滑块，在您调整浏览器窗口大小之前它不会显示。在您将窗口大小更改一个像素之前，该空间是空的。Foundation 正在动态计算滑块的高度，但是当页面首次加载时，容器上没有设置高度。

我还有一个导航栏，在我调整窗口大小之前，它不会自行校正到其计算的宽度。

这是导航条码：

Ew.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    $(".nav").width($(window).width() - 406);
    $(".subnav").width($(window).width() - 396);
    return $(window).resize(function() {
      $(".nav").width($(window).width() - 406);
      return $(".subnav").width($(window).width() - 396);
    });
  }
});

以及滑块初始化代码：

Ew.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {
      stack_on_small: true;
      navigation_arrows: false;
      variable_height: true;
    });
  }.on('didInsertElement')
});

是什么导致 jQuery 函数在窗口调整大小之前不会触发？

4

3 回答 3

2

一个简单的技巧是将.resize()函数链接两次：

return $(window).resize(function() {
    $(".nav").width($(window).width() - 406);
    return $(".subnav").width($(window).width() - 396);
}).resize();    // Resize() onload

您可以看到不使用链接（ http://jsfiddle.net/teddyrised/2x42Q/2/）和使用链接（http://jsfiddle.net/teddyrised/2x42Q/1）之间的区别

于 2013-09-28T10:25:39.450 回答
1

我不完全理解为什么会这样，但它似乎与大小有关.nav，.subnav对吧？我认为这些元素的初始大小发生得太早了。请尝试以下方法：

Ew.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, function(){
      $(".nav").width($(window).width() - 406);
      $(".subnav").width($(window).width() - 396);
      return $(window).resize(function() {
        $(".nav").width($(window).width() - 406);
        return $(".subnav").width($(window).width() - 396);
      });
    }

  }
});

这使您的逻辑在 Ember 执行完所有渲染内容后运行。实际上 didInsertElement 只是保证在给定视图的根元素存在时执行。子元素或子视图不必存在！查看我的博客以获得解释和更优雅的方法来避免代码中这种不美观的嵌套。

于 2013-09-28T08:47:20.647 回答
0

难道是说的部分：

   return $(window).resize(function() {

如果不是 $(window).resize 它是 $(document).load 怎么办？

来自 jQuery 文档：

/*The load event is sent to an element when it and all sub-elements have been 
completely  loaded. This event can be sent to any element associated with a 
URL: images, scripts, frames, iframes, and the window object.*/
于 2013-09-27T22:09:20.423 回答