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

时间:2014-03-20 18:36:17

标签: ember.js

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

这似乎是对车把助手的误用。

3 个答案:

答案 0 :(得分:2)

我们通过制作没有模板的组件在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

希望它有所帮助。

答案 1 :(得分:1)

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

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

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

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

答案 2 :(得分:0)

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

  • 您渲染视图。
  • 您在元素中有一些文字,我们称之为someText
  • 您对包含.dotdotdot()
  • 的元素运行someText
  • 用户输入会导致someText的值发生变化。
  • 您想要,但遇到困难,第二次在包含.dotdotdot()的元素上运行someText

这是对的吗?

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

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

在负责的控制器内。