Skip to content
Permalink
Browse files

fix(repeat): handle mutation properly

  • Loading branch information...
bigopon committed Mar 11, 2019
1 parent dad5cb7 commit eafbfe18161b61cbfa5e63a34fabba9f6b577e84
@@ -23,6 +23,7 @@
"url": "http://github.com/aurelia/ui-virtualization"
},
"scripts": {
"dev": "cd sample/sample-v-ui-app && npm run dev",
"prebuild": "npm run rimraf",
"build": "rollup -c",
"changelog": "node build/changelog.js",

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -16,6 +16,7 @@
"aurelia-bootstrapper": "^2.3.0",
"aurelia-framework": "^1.3.0",
"aurelia-router": "^1.6.2",
"aurelia-templating": "^1.10.1",
"aurelia-templating-binding": "^1.4.3",
"aurelia-templating-resources": "^1.7.1",
"aurelia-templating-router": "^1.3.2",
@@ -16,16 +16,16 @@
<div class="row">
<label class="col-2">
Items:
<input value.to-view="objectArray3.length" readonly class="form-control" />
<input value.to-view="objectArray3.length" readonly class="form-control form-control-sm" />
</label>
<label class="col-5">
Name start with:
<input value.bind="value" input.trigger="search()" class="form-control"/>
<input value.bind="value" input.trigger="search()" class="form-control form-control-sm"/>
</label>

<label class="col-5">
Example:
<select value.bind="selectedMarkup" class="form-control">
<select value.bind="selectedMarkup" class="form-control form-control-sm">
<option value="div">div</option>
<option value="table">table</option>
</select>
@@ -1,5 +1,6 @@
<template>
<require from="./people-list"></require>
<p class="bg-warning px-1">Dynamically changing scroller element isn't well supported. But can still work.</p>
<div class="btn-group btn-group-sm">
<button class="btn btn-info ${mode === 1 ? 'active' : ''}" click.trigger="mode = 1">Full page</button>
<button class="btn btn-info ${mode === 2 ? 'active' : ''}" click.trigger="mode = 2">With fixed height container</button>
@@ -26,6 +26,9 @@ export class App {
// console.log('getting more:', JSON.stringify(scrollContext, undefined, 2));
}
if (!scrollContext || scrollContext.isAtBottom) {
if (this.people.length > 60) {
return;
}
for (let i = 0; i < 30; i++) {
this.people.push({
fname: fNames[Math.floor(Math.random() * fNames.length)],
@@ -16,16 +16,16 @@
<div class="row">
<label class="col-2">
Items:
<input value.to-view="objectArray3.length" readonly class="form-control" />
<input value.to-view="objectArray3.length" readonly class="form-control form-control-sm" />
</label>
<label class="col-5">
Name start with:
<input value.bind="value" input.trigger="search()" class="form-control"/>
<input value.bind="value" input.trigger="search()" class="form-control form-control-sm"/>
</label>

<label class="col-5">
Example:
<select value.bind="selectedMarkup" class="form-control">
<select value.bind="selectedMarkup" class="form-control form-control-sm">
<option value="div">div</option>
<option value="table">table</option>
</select>
@@ -74,8 +74,10 @@ export class PhoneList {
this.objectArray3.unshift(this.createItem(), this.createItem(), this.createItem(), this.createItem(), this.createItem());
}

addItemLast() {
this.objectArray3.push(this.createItem());
addItemLast(count = 10) {
while (count-- > 0) {
this.objectArray3.push(this.createItem());
}
}

removeLast() {
@@ -20,6 +20,9 @@
</td>
</tr>
</tbody>
<tr class="table-danger" style="height: 100px">
<td class="text-center align-middle" colspan="5">Separator</td>
</tr>
<tbody>
<tr virtual-repeat.for="person of people2">
<td class="table-success">${$index}</td>
@@ -1,11 +1,13 @@
<template>
<div class="mb-1">
<div class="px-2" scrollbar="x" style="height: 45px;">
<div class="p-1" scrollbar="x" style="height: 45px;">
<button class="btn btn-success btn-sm" click.trigger="addItems(1000)">Add 1000</button>
<button class="btn btn-success btn-sm" click.trigger="addItems(10000)">Add 10 000</button>
<button class="btn btn-success btn-sm" click.trigger="addItems(100000)">Add 100 000</button>
<button class="btn btn-success btn-sm" click.trigger="addItemFirst()">Add 1 at top</button>
<button class="btn btn-success btn-sm" click.trigger="addItemLast()">Add 1 at bottom</button>
<button class="btn btn-success btn-sm" click.trigger="addItemFirst(1)">Add 1 at top</button>
<button class="btn btn-success btn-sm" click.trigger="addItemFirst(10)">Add 10 at top</button>
<button class="btn btn-success btn-sm" click.trigger="addItemLast(1)">Add 1 at bottom</button>
<button class="btn btn-success btn-sm" click.trigger="addItemLast(10)">Add 1 at bottom</button>
<button class="btn btn-success btn-sm" click.trigger="removeItems(1)">Remove 1 at top</button>
<button class="btn btn-success btn-sm" click.trigger="removeLast()">Remove 1 at bottom</button>
<button class="btn btn-success btn-sm" click.trigger="toggle()">Toggle visibility</button>
@@ -14,7 +16,7 @@

<label class="d-block" style="width: 300px;">
Example:
<select value.bind="selectedMarkup" class="form-control">
<select value.bind="selectedMarkup" class="form-control form-control-sm">
<option value="div">div</option>
<option value="table">table</option>
</select>
@@ -82,8 +82,10 @@ export class PhoneList {
this.objectArray.unshift(this.createItem(), this.createItem(), this.createItem(), this.createItem(), this.createItem());
}

addItemLast() {
this.objectArray.push(this.createItem());
addItemLast(count = 10) {
while (count-- > 0) {
this.objectArray.push(this.createItem());
}
}

removeLast() {
Oops, something went wrong.

0 comments on commit eafbfe1

Please sign in to comment.
You can’t perform that action at this time.