Emberjs - взаимодействовать с представлением после полной загрузки

Question

Я создаю приложение Emberjs, и у меня есть элемент HTML, который содержит текст, который часто переполняет элемент, поэтому я хочу усечь текст и добавить эллипсы.

Вот мой HTML элемент и CSS:

<div class="elementClass">{{textValue}}</div> 

.elementClass { 
    height: 100px; 
} 

Вот функция JavaScript Я использую, чтобы обрезать последние три символа текста, пока scrollHeight больше не больше, чем высота:

function truncateElementText($element) { 
    var html = $element.html(); 

    if ($element.height() < $element.prop('scrollHeight')) { 
     $element.html(html.substring(html.length - 3, html.length) + '&hellip;'); 
     truncateElementText($element); 
    } 
} 

Вот что Emberjs просмотра я использую для вызова truncateElementText на элемент, который я хочу обрезать:

App.MyView = Ember.View.extend({ 
    didInsertElement: function() { 
     Ember.run.scheduleOnce('afterRender', this, function() { 
       var $element = $('.elementClass'); 
       truncateElementText($element); 
     }); 
    } 
}); 

Проблема заключается в том, что truncateElementText, похоже, выполняется до того, как он получит доступ к элементу $. Он не обрезает $ element в первый раз, когда загружается страница, но он обрезает $ element, если я обновляю браузер. Если я сделаю console.log ($ element.html()) в начале didInsertElement, я вижу, что в этот момент у него есть элемент и его HTML, так что это не похоже на то, что $ element недоступен в DOM, когда я выберите его и передайте его функции.

Если я использую setTimeout для задержки truncateElementText на 50 миллисекунд, он работает каждый раз, даже в первый раз, когда страница загружается.

Я новичок в Ember, поэтому любой и все советы будут очень признательны.

Спасибо!

Answer 1

Это не совсем ответ на ваш вопрос, но вы считали эллипсис css?

.elementClass { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Это было бы гораздо проще :)

Вы можете попробовать его здесь: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Одно из себя: если я изменить содержание DOM при использовании Ember, в 99,9% случаев, которых можно избежать.

Answer 2

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

Я проверил его на Chrome с Ember 1.9.1.

Шаблон для вида:

<div class="rawContent" style="display:none">{{model}}</div> 
<div class="elementClass"></div> 

JS для зрения:

App.IndexView = Ember.View.extend({ 

    didInsertElement: function() { 
    var _this = this; 
    Ember.run.next(function() { 
     _this.truncateElementClass(); 
    }); 
    Ember.$(window).on('resize', _this.truncateElementClass); 
    }, 

    willDestroyElement: function(){ 
    var _this = this;  
    Ember.$(window).off('resize', _this.truncateElementClass); 
    }, 

    truncateElementClass: function(){ 
    var $element = this.$('.elementClass'); 
    var $raw = this.$('.rawContent');  
    $element.html($raw.html()); 
    truncateElementText($element); 
    } 
}); 

function truncateElementText($element) { 
    var html = $element.html(); 
    if ($element.height() < $element.prop('scrollHeight')) { 
     $element.html(html.substring(0, html.length - 3) + '&hellip;'); 
     truncateElementText($element); 
    } 
} 

JsBin См, например.