是否可以在点击事件中渲染部分活性模板?
is it possible to render part of a ractive template on click event?
对于 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 编辑按钮,以便应用程序可以管理更大的数据集?
所以如果我没理解错的话,您只是想仅在单击编辑时显示一行的表格?您可以简单地使用条件和方法来根据当前值更改行的呈现方式,无论是数据还是表单。
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 个或其他内容。
对于 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 编辑按钮,以便应用程序可以管理更大的数据集?
所以如果我没理解错的话,您只是想仅在单击编辑时显示一行的表格?您可以简单地使用条件和方法来根据当前值更改行的呈现方式,无论是数据还是表单。
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 个或其他内容。