RactiveJS: Render element on two nodes

Question

Is it possible, and how to do that, to render Ractive instance on two nodes? For example, pagination on top of table and on the bottom.

index.html would be as foollows:

...
<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 initialization:

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

So I want to use one paginationInstance on both <div class="pagination"></div>.

Is it possible and how to achieve this?

Thank you!

Answer 1

You can't use one instance in 2 places. Even normal DOM elements can't do that (If you try to append an existing DOM element on the page into another DOM element, it gets removed from its original place and rendered to the target).

You can always create a separate instance for the second pagination component. In order for both pagination components to be in sync, you need to extract the data to somewhere else. You can use models or listenable objects or the parent component to store the pagination data so that both components can listen to the data changes.

---

Here's an example of a parent component housing both pagination instances:

<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>