Emberjs - 完全加载后与视图交互

Question

我正在构建一个 Emberjs 应用程序，并且我有一个 HTML 元素，其中包含经常溢出元素的文本，因此我想截断文本并附加一个省略号。

这是我的 HTML 元素和 CSS：

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

.elementClass {
     height: 100px;
}

这是我用来修剪文本的最后三个字符直到 scrollHeight 不再大于高度的 JavaScript 函数：

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);
    }
}

这是我用来在要修剪的元素上调用 truncateElementText 的 Emberjs 视图：

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

问题是，truncateElementText 似乎在访问 $element 之前就已执行。第一次加载页面时它不会修剪 $element ，但如果我刷新浏览器它会修剪 $element 。如果我在 didInsertElement 的开头执行 console.log($element.html())，我可以看到它此时具有元素及其 HTML，所以当我在 DOM 中不可用 $element选择它并将其传递给函数。

如果我使用 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

我自己说的一件事：如果我在使用 Ember 时要修改 DOM 的内容，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。