Meteor项目过滤指定用户图片时触发$el未定义ReferenceError报错

• 你点击用户名设置userFilter会话变量时，images模板助手是响应式的，会触发重新查询集合数据，Blaze框架会自动销毁旧的图片列表DOM节点，再渲染新的匹配用户条件的列表。
• 报错来自你引用的starsRating星级评分组件：它的destroyed生命周期钩子中调用的destroyApi函数，尝试访问的$eljQuery对象在执行时已经被Blaze提前从DOM中移除，或者变量已经被释放，才会抛出$el is not defined的引用错误。
• 注意：你代码里排序字段写了错别字cretedOn，正确应为createdOn，这个问题不会触发本次报错，但会导致排序逻辑不生效，建议同步修复。

你可以根据自己的需求选择任意一种方案修复：

方案1：直接修复starsRating组件的销毁逻辑（最彻底） #

修改stars_rating.js文件中的destroyApi函数，执行销毁逻辑前先判断$el是否存在：

function destroyApi() {
  // 新增判断，$el不存在时直接退出，避免报错
  if (typeof $el === 'undefined' || !$el.length) return
  // 原有销毁逻辑保持不变
}

如果$el是绑定在模板实例上的属性，就将判断条件替换为if (!this.$el || !this.$el.length)即可。

方案2：隔离星级组件避免被父级重绘影响 #

修改你的页面模板代码，用{{#isolate}}标签包裹starsRating组件调用，阻止父级列表重绘时直接销毁该组件：

<p> {{#isolate}}{{>starsRating mutable=true class="js-rate-image" id=_id}}{{/isolate}}</p>

方案3：优化列表渲染逻辑复用DOM #

将模板中旧的{{#each}}语法替换为Meteor新版的{{#each in}}语法，该语法会复用已有的DOM节点，不会全量销毁重建列表，减少不必要的组件销毁动作：

{{#each image in images}}
<div class="col-xs-6 col-md-3" id="{{image._id}}">
  <div class="thumbnail">
    <img class="js-image crop-img" src="{{image.img_src}}" alt="{{image.imd_alt}}"/>
    <div class="caption">
      <h3>Rating : {{image.rating}}</h3>
      <p>{{image.imd_alt}}</p>
      <p> User: 
        <a href="#" class="js-set-image-filter"> {{getUser image.createdBy}} </a>
      </p>
      <p> {{>starsRating mutable=true class="js-rate-image" id=image._id}}</p>
      <button class="js-del-image btn btn-warning">Delete</button>
    </div>
  </div>
</div>
{{/each}}

内容的提问来源于stack exchange，提问作者Mohamad Khoder