Ember.js - как получить ширину элемента?

Question

Я получаю в борьбу с ember.js, но могли бы сделать с некоторыми советами ...

Я хотел бы создать представление, которое является ДИВ с ул вложенной в него. Перед рендерингом я хотел бы посмотреть, насколько широка родительская div есть и рассчитать, сколько li, чтобы добавить в ul с петлей для петли.

Не могли бы вы предложить лучший способ сделать это, потому что я борется!

Cheers!

Answer 1

Не знаю много о вашем коде, вот очень быстрый и простой пример. Надеюсь, это даст вам несколько указателей, и вы сможете приспособить их.

Идея состоит в том, чтобы использовать событие didInsertElement в представлении, которое вызывается, когда оно было вставлено в DOM, тогда вы можете получить объект JQuery этого DIV с this.$().

App.SomeKindOfView = Ember.View.extend({ 
    //-snip- 
    didInsertElement: function() 
    { 
    this._super(); 
    var parentWidth = this.$().parents('div').width(); 
    //do some fancy caculation with parentWidth 
    //then save the result on the View or Controller... 
    } 
    //-snip- 
}); 

В шаблоне вы можете иметь что-то вроде (так как это по умолчанию обернут в DIV:

<ul> 
    {{#each item in controller}} 
    <li>{{item.someContent}}</li> 
    {{/each}} 
</ul> 

Answer 2

Способ определения width в виде view бы зацепив в didInsertElement

App.IndexView = Ember.View.extend({ 
    willInsertElement: function() { 
    console.log(this.$().css('width')); 
    }, 
    didInsertElement: function() { 
    console.log(this.$().css('width')); 
    } 
}); 

Для вашего случая использования более актуальна willInsertElement, потому что она будет называться перед didInsertElement, но width пока еще не рассчитан.

Для примера сыграйте jsbin.

Надеюсь, это поможет.