Question

对于CRUD接口我在Datatable中有一个由ractive渲染的JSON。因此，对于其中两列，我需要一个多选下拉列表（带bootstrap-multiselect），因为这些值是从另一个计算值列表中预定义的。

简化它看起来像这样：

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
        }
   }
});

只要我有少量的人和技能，剧本就会很有效，但实际上大约有1000到1.500人和技能。因此，如果我尝试立即渲染它，我的应用程序会崩溃内存或需要很长时间来构建列表。

有没有人知道一种渲染技能列表的方法 - 包括预选值 - 只需单击我的编辑按钮到表，这样应用程序就可以管理更大的数据集？

Answer 1

因此，如果我理解正确，您只想在单击编辑时显示行的表单？您可以简单地使用条件和方法来更改行的呈现方式，具体取决于当前值，无论是数据还是表单。

＆＃13;

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 }}" />
  `
});

＆＃13;

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

＆＃13;

Ractive可以相当容易和快速地渲染大量内容，如dbmonster demo所示。因此，如果您的代码很慢，则必须有其他内容。或者，您不必渲染1,500多个东西。让Ractive分页列表，一次渲染100个。

是否有可能在点击事件中呈现一部分ractive模板？

1 个答案: