javascript - is it possible to render part of a ractive template on click event? -

for crud-interface have json in datatable rendered ractive. 2 of columns need multiselect dropdown (with bootstrap-multiselect), values predefined out of list of computed values.

simplified looks this:

const datatpl = '{{#persondata:i}}' +     '<td><select multiple id="persons{{i}}" value="{{hasskill}}">' +     '{{#skills}}' +     '<option value="{{_id}}">{{skill}}</option>' +     '{{/skills}}' +     '</select></td>' +     '<td><button on-click="@this.edit(i)"></button></td>';  let ractive = new ractive({     el: '#table',     template: datatpl,     data: {         alldata: docs     },     computed: {          skills() {             // --> computes list of possible skills out of given data         },         persondata() {             // --> computes list of persons         }    } }); 

the script works great long have small amount of persons , skills, in reality there 1.000-1.500 persons , skills. if try render @ once application crashes out of memory or takes ages build list.

does know way render skills list - including preselected values - on click of edit button table, application can manage bigger datasets?

so if understand correctly, want show forms row when click on edit? can use conditionals , methods change how row renders depending on current values, whether data or form.

ractive.debug = false;  const peopletable = ractive.extend({    data: () => ({      people: [],      currentlyediting: null,      options: {}    }),    isbeingedited(i){      return this.get('currentlyediting') === i;    },    template: `      <table>        {{#each people }}          {{#if @this.isbeingedited(@index) }}            <tr>              <td><input type="text" value="{{ name }}"></td>              <td><input type="text" value="{{ email }}"></td>              <td>                <select value="{{ }}">                  {{#each options }}                    <option value="{{ @key }}">{{ }}</option>                  {{/each}}                </select>              </td>              <td><button type="button" on-click="@this.set('currentlyediting', null)">done</button></td>            </tr>          {{ else }}            <tr>              <td>{{ name }}</td>              <td>{{ email }}</td>              <td>{{ options[something] }}</td>              <td>                {{#if !currentlyediting }}                <button type="button" on-click="@this.set('currentlyediting', @index)">edit</button>                {{/if}}              </td>            </tr>          {{/if}}        {{/each}}      </table>      `  });    const app = new ractive({    components: { peopletable },    el: 'body',    data: () => ({      people: [        { name: 'bob', email: 'bob@example.com', something: 1 },        { name: 'joe', email: 'joe@example.com', something: 2 },        { name: 'gin', email: 'gin@example.com', something: 3 },      ],      somethingoptions: {        '1': 'foo',        '2': 'bar',        '3': 'baz'      }    }),    template: `      <peopletable people="{{ people }}" options="{{ somethingoptions }}" />    `  });

<script src="https://unpkg.com/ractive@0.8.12/ractive.min.js"></script>

ractive can render ton of things , fast, seen on dbmonster demo. if code slow, there must else going on. alternatively, don't have render 1,500+ things. let ractive paginate list, render 100 @ time or something.