Ember.js 当部分模板重新呈现时触发事件

在我的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);
});

Ember.handlebar.helper（'dotdot'，函数（str）{
var id=generateRandomId（）；
var content=`${str}`；
Em.run.later（（）=>$（`${id}`.）.dotdot（）；
返回新把手。安全字符串（内容）；
});

---

不过，这似乎是对车把助手的滥用。

我认为余烬的方法是为其创建一个视图或（更好的）组件。然后，您可以在其中插入一个观察者，观察内容，并在内容更改时重新运行javascript

编辑：想想看，车把组件不是一个坏的选择，因为它是一个格式化的东西，没有额外的逻辑。然而，在我看来，使用助手的“正确”方式应该是这样做：

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

---

也许你可以从插件中找到

dotdot

函数

你的问题有点模棱两可，但以下是我对它的解释。让我知道这是否正确：

• 渲染视图
• 元素中有一些文本，我们称之为

  someText

• 在包含

  someText

  的元素上运行

  .dotdot（）

• 用户输入导致

  someText

  的值更改
• 您想再次在包含

  someText

  的元素上运行

  .dotdot（）

  ，但遇到困难

这是正确的吗

如果是这样，您只需观察

someText

content属性，并在每次更改时运行

.dotdot（）

。比如：

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

---

在负责的控制器内。

我们通过制作没有模板的组件解决了这个问题。我们遇到的问题是dotdot对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：

---

希望能有帮助

我有点担心性能，所以我不知道有几十个（或几百个）组件是否能很好地工作。我当然可以试试。您知道Ember.js是否支持嵌套组件吗？我在某个地方读到，它处理它们的方式不太优雅。几十个组件应该不是问题，为什么不试试呢？虽然这是一个格式化的东西，但我不认为Handlebar助手是不合理的。我喜欢提取

dotdot

函数的想法。不幸的是，它将需要大量的内联CSS，但它应该可以正常工作。我先试试。祝你好运，你不能把CSS分割成一个单独的文件吗？事实证明dotdot根据元素的当前大小做了很多计算。我认为如果不先渲染元素，就不可能完成这项工作。看起来我必须使用一个组件。对不起，我必须回去把它弄清楚一点。这种方法可能有效，但会非常脆弱。我在屏幕上有几十个（可能有几百个）盒子，每个盒子都有自己的型号。每个框包含来自每个模型的4到5个字段。我设置组件的方式会让这变得相当麻烦，所以这是我最后的选择。数百种型号？？这些模型真的是链接到视图/控制器的模型吗？还是仅仅有一个值数组？它们是具有关系的完整模型。我正在显示一个数据矩阵（有点像电子表格），每个单元格都有自己的模型。。。。为什么？为什么它不只是一个数据数组？如果你有一个属性绑定到每一列的对象数组，那么你的生活似乎比需要的要困难得多。我想你这样做是有原因的，但这看起来确实有点复杂。。。不管你的理由是什么，它们肯定会对这里讨论的问题产生影响。为什么？它们是单独的记录，它们的存在比我当前显示它们的网格要大得多。您可能只需要使用

CSS

。。。不那么头痛。检查这个：如果你只是想在

DIV

或其他东西中包含文本，这个功能非常有用。

文本溢出功能只适用于一行文本，而我有多行，因此仅CSS的解决方案对我不起作用。（我知道有一些解决办法，但没有一个特别好。）啊，好的，我应该仔细看看你的要求。如果您还没有看过这篇文章，请看一看：有一些看起来不错的多行CSS解决方案，还有一些底部的JS解决方案。不确定你是否看过clamp.js？我有点喜欢这种方法。我想我很快就要离开dotdot了，但我可能会使用类似这样的东西，结合一些自定义逻辑来添加省略号。酷！是的，dotdot有点多毛。总的来说，我个人不在乎JS做出布局决策。但有时这是必要的。干杯