jquery - EmberJS 在所有视图上渲染后执行 JS

Question

我正在尝试运行此代码：

var width = 0; 
$('.photos article').each(function(){ width = width + $(this).width();});
$('.photos').width(width);

在视图呈现后，无法弄清楚如何做到这一点，这是包含所有视图和内容的代码：

http://jsbin.com/okezum/6/edit

我想在所有视图上运行我的代码，有人可以帮我吗？

Answer 1

您可以通过didInsertElement在所有视图上定义钩子来实现您想要做的事情，并且在获取 DOM 元素的 id 之后，您可以执行您可能需要的任何 jQuery 代码。由于您希望在“所有”视图上执行此操作，因此您可以编写一个通用视图，所有需要执行代码的视图都从该视图扩展。

例子：

App.GeneralView = Ember.View.extend({
  didInsertElement: function() {
    var width = 0; 
    $('.photos article').each(function(){ 
      width = width + $(this).width();
    });
    $('.photos').width(width);
  }
});

App.IndexView = App.GeneralView.extend();
...

请注意，如果需要获取视图的 ID，您可以使用 访问它this.get('elementId')，我还修改了您的 jsbin，请参阅此处以获取工作版本。

希望能帮助到你。

Answer 2

修复了这个：

App.GeneralView = Ember.View.extend({
    didInsertElement: function() {
        if (this.$().find(".post img").length > 0) {
            var WIDTH = 0, HEIGHT = $(window).height(), SIDEBAR_WIDTH =   $('#sidebar').outerWidth();
            this.$().find(".post").each(function(){
                WIDTH += parseInt($(this).find('img').attr('width'));
                $(this).find('img').height(HEIGHT - 80).removeAttr('width');
            });
            $('body').children('.ember-view').innerWidth(WIDTH);
        } else {
            Ember.run.next(this, function() {
                this.didInsertElement();
            });
        }
    }
});

不知道这是否是最好的方法，但有效；s