Событие триггера, когда часть шаблона повторно отображается

Question

У меня возникли проблемы с использованием jQuery dotdotdot plugin в моем приложении Ember.js. Мне нужно запустить плагин на элементе всякий раз, когда его содержимое изменяется, чтобы он мог пересчитать новый контент с помощью многоточия. Проблема в том, что Ember.js не предупреждает меня, когда отображается часть вида, только основного элемента. Поэтому, если модель меняет и обновляет мою ячейку, чтобы иметь значительно больше текста, у меня нет возможности запускать плагин для его очистки.

Есть ли способ быть предупрежденным, когда выражение в шаблоне повторно отображается? Я мог посмотреть значение свойства на модели, но у меня есть десятки коробок на экране из десятков разных моделей, поэтому я думаю, что это будет довольно неэффективно (и медленная моя страница будет уменьшаться по мере того, как она станет больше). Мое текущее мышление будет ругать помощник Рулей:

Ember.Handlebars.helper('dotdotdot', function(str) { 
    var id = generateRandomId(); 
    var content = `<span id="${id}">${str}<span>`; 

    Em.run.later(() => $(`#${id}`).dotdotdot()); 
    return new Handlebars.SafeString(content); 
}); 

Это похоже на неправильном использовании руля помощника, хотя.

Answer 1

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

EDIT: Подумайте об этом, компонент Handlebars не является плохим вариантом, потому что это форматирование, и нет никакой дополнительной логики. Тем не менее, мне кажется, «правильный» способ использования помощника будет делать что-то вроде этого:

Ember.Handlebars.helper('dotdotdot', function(str) { 
    return new Handlebars.SafeString(dotdotdot(str)); 
}); 

Может быть, вы можете найти dotdotdot функцию из плагина?

Answer 2

Ваш вопрос немного двусмыслен, но вот моя интерпретация. Дайте мне знать, если это верно:

• Вы визуализировали свое мнение.
• У вас есть текст, который мы назовем someText, внутри элемента.
• Вы используете .dotdotdot() на элементе, содержащем someText.
• Пользовательский ввод вызывает изменение значения someText.
• Вы хотите, но с трудом, бегите .dotdotdot() на элемент, содержащий someText второй раз.

Это правильно?

Если да, вы можете просто наблюдать за свойством someText и запускать .dotdotdot() каждый раз, когда он изменяется. Что-то вроде:

updateDot : function(){ 
    ("#containingElement").dotdotdot(); 
}.observes('someText') 

Внутри ответственного контроллера.

Answer 3

Мы решили это в приложении, создав компонент, у которого не было шаблона. Проблема, с которой мы столкнулись, заключается в том, что dotdotdot немного переусердствовал в отношении DOM-манипуляции IMHO. Он постоянно ступает на носок Метаморфа.Во всяком случае, вот мое решение:

App.DotDotDotComponent = Ember.Component.extend({ 
    tagName: 'span', 

    // Maximum height before the ellipse kicks in. 
    height: 40, 

    didInsertElement: function() { 
     this._super(); 
     this.updateDOM(); 
    }, 

    // {Observer} Watches for content changes 
    _contentDidChange: function() { 
    this.updateDOM(); 
    }.observes('value'), 

    // Updates the DOM with the current values 
    updateDOM: function() { 
    var height = parseInt(this.get('height'), 10) || 40; 
    if(this.get('state') === 'inDOM') { 
     this.$().text(this.get('value')); 
     this.$().dotdotdot({ height: height }); 
    } 
    } 
}); 

В шаблоне:

{{dot-dot-dot value=body height="40"}} 

Вот jsbin: http://emberjs.jsbin.com/wiqisate/2/edit

Надеется, что это помогает.