是否可以在点击事件中渲染部分活性模板？

Question

对于 CRUD 接口，我在 Datatable rendered by ractive. So for two of the columns I need a multiselect dropdown (with bootstrap-multiselect 中有一个 JSON，因为这些值是从另一个计算值列表中预定义的。

简化后看起来像这样：

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() {
            // --> this computes a list of possible Skills out of the given Data
        },
        PersonData() {
            // --> this computes a list of Persons
        }
   }
});

只要我有少量人员和技能，脚本就可以很好地工作，但实际上大约有 1.000-1.500 人和同样多的技能。因此，如果我尝试一次渲染所有内容，我的应用程序会崩溃，内存不足或需要很长时间才能构建列表。

有谁知道一种方法来呈现技能列表 - 包括预选值 - 只需单击我的 table 编辑按钮，以便应用程序可以管理更大的数据集？

Answer 1

所以如果我没理解错的话，您只是想仅在单击编辑时显示一行的表格？您可以简单地使用条件和方法来根据当前值更改行的呈现方式，无论是数据还是表单。

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="{{ something }}">
                {{#each options }}
                  <option value="{{ @key }}">{{ this }}</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 可以相当容易和快速地渲染大量内容，如 dbmonster demo 所示。因此，如果您的代码很慢，则一定是有其他原因。或者，您不必渲染 1,500 多个东西。让 Ractive 对该列表进行分页，一次渲染 100 个或其他内容。

是否可以在点击事件中渲染部分活性模板？

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

javascript

datatables

ractivejs

bootstrap-multiselect