Question

我在使用Ember.js应用中的jQuery dotdotdot plugin时遇到问题。我需要在元素内容发生变化时在元素上运行插件，以便可以使用省略号重新计算新内容。问题是，当渲染视图的 part 时，Ember.js不会提醒我，只是主要元素。因此，如果模型更改并更新我的单元格以获得更多文本，我无法运行该插件来清理它。

当重新呈现模板中的表达式时，是否有提醒的方法？我可以在模型上观看属性值，但是屏幕上有几十个不同型号的数十个盒子，所以我觉得效率很低（随着它变得越来越大，我的页面变慢）。我目前的想法是滥用Handlebars助手：

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

我们通过制作没有模板的组件在app中解决了这个问题。我们遇到的问题是dotdotdot对它的DOM操作恕我直言有点过分热心。它一直踩着Metamorph的脚趾。无论如何，这是我的解决方案：

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

希望它有所帮助。

Answer 2

我说Ember的方式是创建一个视图或（更好）一个组件。然后你可以在那里观察一下观察者，观察内容并在它改变时重新运行你的javascript。

编辑：想想看，Handlebars组件不是一个糟糕的选择，因为它是一个格式化的东西而且没有额外的逻辑。然而，在我看来，正确的＆＃39;使用帮助程序的方法是做这样的事情：

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

也许你可以从插件中找到dotdotdot函数？

Answer 3

你的问题有点含糊不清，但这是我对它的解释。如果这是正确的，请告诉我：

您渲染视图。
您在元素中有一些文字，我们称之为someText。
您对包含.dotdotdot()。

someText

用户输入会导致someText的值发生变化。
您想要，但遇到困难，第二次在包含.dotdotdot()的元素上运行someText。

这是对的吗？

如果是这样，您只需观察someText内容属性，并在每次更改时运行.dotdotdot()。类似的东西：

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

在负责的控制器内。

部分模板重新渲染时触发事件

3 个答案: