RactiveJS：在两个节点上渲染元素

Question

是否可以在两个节点上渲染 Ractive 实例，以及如何做到这一点？例如，表格顶部和底部的分页。

index.html 会很傻：

...
<div id="mainBigTable">
   <div class="pagination"></div>

   <div id="dataTable"></div>  

   <div class="pagination"></div>
</div>
...

RactiveJS：

var paginationClass = Ractive.extend({
    template: template("paginationClassTemplate");
    init: function() {
        //Some initialization
    }
});

app.js 初始化：

paginationInstance = new paginationClass();
return paginationInstance.render("#mainBigTable .pagination");

所以我想在两个<div class="pagination"></div> 上使用一个paginationInstance。

是否有可能以及如何实现？

谢谢！

Answer 1

您不能在 2 个地方使用一个实例。即使是普通的 DOM 元素也无法做到这一点（如果您尝试将页面上的现有 DOM 元素附加到另一个 DOM 元素中，则会将其从原来的位置移除并呈现到目标）。

您始终可以为第二个分页组件创建单独的实例。为了使两个分页组件同步，您需要将数据提取到其他地方。您可以使用模型或可监听对象或父组件来存储分页数据，以便两个组件都可以监听数据变化。

---

这是一个包含两个分页实例的父组件示例：

<script type="template/ractive" id="template-parent">
  <div id="mainBigTable">
   <pagination currentPage="{{currentPage}}" pages="{{pages}}" />
   <div id="dataTable"></div>  
   <pagination currentPage="{{currentPage}}" pages="{{pages}}" />
  </div>
</script>

<script>
// So here we define a "parent" component that houses your pagination as
// it's components. In the template above, you see a custom element named
// after the component. It receives currentPage and pages from BigTable
var BigTable = Ractive.extend({
  template: '#template-parent',
  data: {
    // Defaults
    currentPage: 0,
    pages: 0,
  },
  components: {
    pagination: paginationClass
  }
});

// Now you treat bigTable as an instance too!
var bigTable = new BigTable({
  el: 'somewhere-in-your-page',
});

// Now all you need to do is change bigTable's data and it will
// trickle down to both pagination components
bigTable.set('currentPage', 3);
</script>