你能“劫持”渲染 Ractive 模板的一部分吗？答案

【问题标题】：Can you "hijack" rendering part of a Ractive template?你能“劫持”渲染 Ractive 模板的一部分吗？
【发布时间】：2016-06-23 06:11:40
【问题描述】：

我有一个“SuperSelect”控件，目前实现为 Ractive 组件，它通过搜索、过滤、扩展选项描述和各种其他好东西来扩充常规下拉选择列表。这通常工作得很好，除了我现在需要用大约 7,800 个选项填充这些 SuperSelects 之一，它变得真的很慢，并且也减慢了页面的其余部分。问题似乎是 Ractive 的内部内存使用；如果我在 vanilla JS 中重新实现 SuperSelect，大部分问题都会消失。不幸的是，我看不到一个好的方法来实际使用我更高效的 SuperSelect 而不完全撕掉 Ractive 使用它的每个地方，这就像把婴儿和洗澡水一起扔出去一样。

所以，基本上，我需要一种方法将由其他代码管理的 DOM 块插入到 Ractive 模板的中间，同时仍然允许在包含 Ractive 实例更新相关键路径时通知控制代码，据我所知，现有的插件/扩展方法都不符合要求。到目前为止，我已经提出了两个组合多个可能有效的插件方法的技巧：

结合适配器和装饰器。在这种情况下，装饰器将简单地将其附加到的任何元素替换为 SuperSelect 的 DOM 片段。然后将一个特殊的 SuperSelect 控件对象添加到 Ractive 实例的数据中，并使用一个适配器让它参与与模板其余部分的 2 向绑定，并独立与装饰器代码通信以更新 SuperSelect DOM。
将装饰器与迷你组件和ractive.observe 组合在一起。在这种情况下，装饰器将再次用 SuperSelect DOM 片段替换特定的模板元素，但它只会在组件中本地使用，该组件的模板只包含一个装饰元素。该组件将用作重置 keypath 根的一种方式，以便装饰器代码可以observe 一组静态 keypaths 以更新 SuperSelect DOM 的状态，而不管 SuperSelect 如何嵌入到更大的父 ractive 实例中.

有没有更简单的方法来做我需要的事情？

【问题讨论】：

标签： javascript ractivejs

【解决方案1】：

是的——你可以创建一个带有空 DOM 节点的组件，并在观察处理程序中重新渲染其内容：

const SuperSelect = Ractive.extend({
  template: `
    <div><!-- we'll render this bit ourselves --></div>`,
  onrender () {
    const div = this.find( 'div' );
    this.observe( 'items', items => {
      // render the items however we want
    });
  }
});

更完整的演示在这里：http://jsfiddle.net/9w9rrr9s/

【讨论】：