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在访问$元素之前似乎正在执行。它不会在第一次加载页面时修剪$元素，但如果刷新浏览器，它将修剪$元素。如果我在didInsertElement的开头做了console.log（$ element.html（）），我可以看到它在那一点上有元素及其HTML，所以它不像$ element isn＆t; t当我选择它并将其传递给函数时，在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

我自己有一件事：如果我在使用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。

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

2 个答案: