EmberJS 1.0.0 RC7在图像加载后运行代码

时间:2013-08-26 21:46:34

标签: image view ember.js controller resize

我正在尝试在视图和图像加载到屏幕后调整图像大小。 我有这个TAG路线,在更新EmberJS到RC7后,我看到didInsertedElement停止工作,它只运行一次,但我每次进入视图时都需要它运行。

所以我尝试在setupController上运行代码,如下所示:

App.TagRoute = Ember.Route.extend({
model: function(params) {
    return App.TKRPTumblr.findAll(params.tag);
},
setupController: function(controller, tag) {
    if(typeof tag === 'object'){
        controller.set('content', tag.response);
    }else{
        App.TKRPTumblr.findAll(tag)
        .then(function(data) {
            controller.set('content', data.response);       
        });
    }
    this.resizeView();
},
resizeView: function(){
    var WIDTH = 0, RATIO, IMG, IMG_HEIGHT, IMG_WIDTH, FINAL_WIDTH, SIDEBAR_WIDTH = $('#sidebar').outerWidth(), MAX_WIDTH = $(window).width() - SIDEBAR_WIDTH, MAX_HEIGHT = $(window).height() - 125;

    if($('html .post').find('img').length > 0){
        $('.post').each(function(){
            IMG = $(this).find('img');
            IMG_WIDTH = IMG.attr('width');
            IMG_HEIGHT = IMG.attr('height');
            if(IMG_WIDTH > MAX_WIDTH){
                RATIO = MAX_WIDTH / WIDTH;
                IMG.width(MAX_WIDTH).height(IMG_HEIGHT * RATIO);

            }
            if(IMG_HEIGHT > MAX_HEIGHT){
                RATIO = MAX_HEIGHT / IMG_HEIGHT;
                IMG.width(IMG_WIDTH * RATIO).height(MAX_HEIGHT);
            }
            WIDTH += IMG.width();
        });
            if(isNaN(WIDTH)){
                WIDTH = $('.post img').width() + SIDEBAR_WIDTH;
                $('body').children('.ember-view').innerWidth(WIDTH);
            }else{
                WIDTH += SIDEBAR_WIDTH + 100;
                $('body').children('.ember-view').innerWidth(WIDTH);
            }
            var evt = document.createEvent('Event');
            evt.initEvent('_htmlReady', true, true);
            document.dispatchEvent(evt);
    }else{
        Ember.run.next(this, function() {
            this.resizeView();
        });
    }
}

});

不幸的是它效果不好:/我现在无法弄清楚如何做到这一点:((任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

  

它只运行一次,但我每次进入视图时都需要它运行。

如果您依赖model挂钩返回的数据,那么我想您应该使用路由afterModel挂钩,每次进入路由时都会调用此model已经解决了。

App.TagRoute = Ember.Route.extend({
  afterModel: function() {
    this.resizeView();
  }
  ...
});

但是如果您只关心调用函数每个时间输入路径,无论模型是否已解析,那么使用路径activate挂钩也是一个选项:

App.TagRoute = Ember.Route.extend({
  activate: function() {
    this.resizeView();
  }
  ...
});

希望它有所帮助。