Fix: ListView not showing first items of VirtArray

This commit is contained in:
vakrilov
2017-02-09 16:52:14 +02:00
parent 4ce4b12859
commit 87f936bcd8
5 changed files with 54 additions and 54 deletions

View File

@ -1,10 +1,10 @@
import {ImageSource, fromFile as imageSourceFromFile} from "image-source";
import {VirtualArray, ItemsLoading as virtualArrayItemsLoadingData} from "data/virtual-array";
import {Observable} from "data/observable";
import {Cache as ImageCache} from "ui/image-cache";
import { ImageSource, fromFile as imageSourceFromFile } from "image-source";
import { VirtualArray, ItemsLoading as virtualArrayItemsLoadingData } from "data/virtual-array";
import { Observable } from "data/observable";
import { Cache as ImageCache } from "ui/image-cache";
import {Data as RedditData} from "./reddit-model";
import {RedditViewModel} from "./reddit-item-view-model";
import { Data as RedditData } from "./reddit-model";
import { RedditViewModel } from "./reddit-item-view-model";
var aboutText = "Cuteness is a proof of concept app demonstrating the Telerik's NativeScript for writing native mobile applications using JavaScript.";
export var defaultThumbnailImageSource = imageSourceFromFile("~/cuteness.io/res/reddit-logo.png");
@ -28,9 +28,9 @@ export class AppViewModel extends Observable {
this._redditItems.loadSize = 50;
this._redditItems.on(VirtualArray.itemsLoadingEvent, (args: virtualArrayItemsLoadingData) => {
fetch(redditUrl + args.count + (after ? "&after=" + after : "")).then<RedditData>(response=> response.json()).then(result => {
fetch(redditUrl + args.count + (after ? "&after=" + after : "")).then<RedditData>(response => response.json()).then(result => {
var itemsToLoad = result.data.children.map(i=> {
var itemsToLoad = result.data.children.map(i => {
return new RedditViewModel(i.data);
});

View File

@ -1,8 +1,8 @@
import {Observable} from "data/observable";
import {ImageSource, fromFile as imageSourceFromFile, fromUrl as imageSourceFromUrl} from "image-source";
import { Observable } from "data/observable";
import { ImageSource, fromFile as imageSourceFromFile, fromUrl as imageSourceFromUrl } from "image-source";
import {ItemData} from "./reddit-model";
import {defaultThumbnailImageSource, defaultNoThumbnailImageSource, cache} from "./reddit-app-view-model";
import { ItemData } from "./reddit-model";
import { defaultThumbnailImageSource, defaultNoThumbnailImageSource, cache } from "./reddit-app-view-model";
var firstThumbnailImageSource = imageSourceFromFile("~/cuteness.io/res/first-image.png");
var defaultImageSource = imageSourceFromFile("~/cuteness.io/res/reddit-logo-transparent.png");

View File

@ -9,7 +9,7 @@ export class ChangeType implements observableArrayDef.ChangeType {
static Splice = "splice";
}
var CHANGE = "change";
const CHANGE = "change";
export class ObservableArray<T> extends observable.Observable implements observableArrayDef.ObservableArray<T> { // implements Array<T> {
@ -91,7 +91,7 @@ export class ObservableArray<T> extends observable.Observable implements observa
*/
concat(): T[] {
this._addArgs.index = this._array.length;
var result = this._array.concat.apply(this._array, arguments);
const result = this._array.concat.apply(this._array, arguments);
return result;
}
@ -109,7 +109,7 @@ export class ObservableArray<T> extends observable.Observable implements observa
pop(): T {
this._deleteArgs.index = this._array.length - 1;
var result = this._array.pop();
const result = this._array.pop();
this._deleteArgs.removed = [result];
@ -127,10 +127,9 @@ export class ObservableArray<T> extends observable.Observable implements observa
this._addArgs.index = this._array.length;
if (arguments.length === 1 && Array.isArray(arguments[0])) {
const source = <Array<T>>arguments[0];
var source = <Array<T>>arguments[0];
for (var i = 0, l = source.length; i < l; i++) {
for (let i = 0, l = source.length; i < l; i++) {
this._array.push(source[i]);
}
}
@ -147,7 +146,7 @@ export class ObservableArray<T> extends observable.Observable implements observa
}
_notifyLengthChange() {
var lengthChangedData = this._createPropertyChangeData("length", this._array.length);
const lengthChangedData = this._createPropertyChangeData("length", this._array.length);
this.notify(lengthChangedData);
}
@ -162,7 +161,7 @@ export class ObservableArray<T> extends observable.Observable implements observa
* Removes the first element from an array and returns it.
*/
shift(): T {
var result = this._array.shift();
const result = this._array.shift();
this._deleteArgs.index = 0;
this._deleteArgs.removed = [result];
@ -197,8 +196,8 @@ export class ObservableArray<T> extends observable.Observable implements observa
* @param items Elements to insert into the array in place of the deleted elements.
*/
splice(start: number, deleteCount?: number): T[] {
var length = this._array.length;
var result = this._array.splice.apply(this._array, arguments);
const length = this._array.length;
const result = this._array.splice.apply(this._array, arguments);
this.notify(<observableArrayDef.ChangedData<T>>{
eventName: CHANGE, object: this,
@ -219,8 +218,8 @@ export class ObservableArray<T> extends observable.Observable implements observa
* @param items Elements to insert at the start of the Array.
*/
unshift(): number {
var length = this._array.length;
var result = this._array.unshift.apply(this._array, arguments);
const length = this._array.length;
const result = this._array.unshift.apply(this._array, arguments);
this._addArgs.index = 0;
this._addArgs.addedCount = result - length;
@ -237,8 +236,8 @@ export class ObservableArray<T> extends observable.Observable implements observa
* @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0.
*/
indexOf(searchElement: T, fromIndex?: number): number {
var index = fromIndex ? fromIndex : 0;
for (var i = index, l = this._array.length; i < l; i++) {
const index = fromIndex ? fromIndex : 0;
for (let i = index, l = this._array.length; i < l; i++) {
if (this._array[i] === searchElement) {
return i;
}
@ -252,9 +251,9 @@ export class ObservableArray<T> extends observable.Observable implements observa
* @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at the last index in the array.
*/
lastIndexOf(searchElement: T, fromIndex?: number): number {
var index = fromIndex ? fromIndex : this._array.length - 1;
const index = fromIndex ? fromIndex : this._array.length - 1;
for (var i = index; i >= 0; i--) {
for (let i = index; i >= 0; i--) {
if (this._array[i] === searchElement) {
return i;
}
@ -316,7 +315,7 @@ export class ObservableArray<T> extends observable.Observable implements observa
return this._array.reduce(callbackfn, initialValue);
}
/**
/**
* Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.

View File

@ -1,17 +1,19 @@
import * as observable from "data/observable";
import * as types from "utils/types";
import { Observable } from "data/observable";
import * as virtualArrayDef from "data/virtual-array";
var CHANGE = "change", UPDATE = "update", DELETE = "delete", ADD = "add";
const CHANGE = "change";
const UPDATE = "update";
const DELETE = "delete";
const ADD = "add";
export class ChangeType implements virtualArrayDef.ChangeType {
static Add = "add";
static Delete = "delete";
static Update = "update";
static Splice = "splice";
static Add = ADD;
static Delete = DELETE;
static Update = UPDATE;
static Splice = CHANGE;
}
export class VirtualArray<T> extends observable.Observable {
export class VirtualArray<T> extends Observable implements virtualArrayDef.VirtualArray<T> {
public static changeEvent = CHANGE;
public static itemsLoadingEvent = "itemsLoading";
@ -36,8 +38,8 @@ export class VirtualArray<T> extends observable.Observable {
set length(value: number) {
if (this._length !== value) {
var index = this._length;
var count = value - this._length;
const index = this._length;
const count = value - this._length;
this._length = value;
@ -60,9 +62,9 @@ export class VirtualArray<T> extends observable.Observable {
}
getItem(index: number): T {
var item = this._cache[index];
const item = this._cache[index];
if (types.isUndefined(item)) {
if (item === undefined) {
if (index >= 0 && index < this.length && this._requestedIndexes.indexOf(index) < 0 && this._loadedIndexes.indexOf(index) < 0) {
this.requestItems(index);
}
@ -78,10 +80,9 @@ export class VirtualArray<T> extends observable.Observable {
}
load(index: number, items: T[]): void {
var i: number;
for (i = 0; i < items.length; i++) {
for (let i = 0; i < items.length; i++) {
var itemIndex = index + i;
const itemIndex = index + i;
this._cache[itemIndex] = items[i];
@ -94,7 +95,7 @@ export class VirtualArray<T> extends observable.Observable {
// Remove requested but never loaded indexes.
if (this._requestedIndexes.length > 0) {
for (i = 0; i < this.loadSize - items.length; i++) {
for (let i = 0; i < this.loadSize - items.length; i++) {
this._requestedIndexes.splice(this._requestedIndexes.indexOf(index + i), 1);
}
}
@ -109,14 +110,14 @@ export class VirtualArray<T> extends observable.Observable {
}
private requestItems(index: number): void {
var indexesToLoad = [];
const indexesToLoad = [];
var pageIndex = this._loadSize > 0 ? this._loadSize * Math.floor(index / this._loadSize) : index;
var count = 0;
var start = -1;
const pageIndex = this._loadSize > 0 ? this._loadSize * Math.floor(index / this._loadSize) : index;
let count = 0;
let start = -1;
for (var i = 0; i < this.loadSize; i++) {
var itemIndex = pageIndex + i;
for (let i = 0; i < this.loadSize; i++) {
const itemIndex = pageIndex + i;
if (itemIndex >= this._length) {
break;

View File

@ -1,5 +1,5 @@
import { ListView as ListViewDefinition, ItemsSource } from "ui/list-view";
import { CoercibleProperty, CssProperty, Style, View, Template, KeyedTemplate, Length, Property, Color, lengthComparer } from "ui/core/view";
import { CoercibleProperty, CssProperty, Style, View, Template, KeyedTemplate, Length, Property, Color, lengthComparer, Observable } from "ui/core/view";
import { parse, parseMultipleTemplates } from "ui/builder";
import { Label } from "ui/label";
import { ObservableArray, ChangedData } from "data/observable-array";
@ -129,11 +129,11 @@ export abstract class ListViewBase extends View implements ListViewDefinition {
*/
export const itemsProperty = new Property<ListViewBase, any[] | ItemsSource>({
name: "items", valueChanged: (target, oldValue, newValue) => {
if (oldValue instanceof ObservableArray) {
if (oldValue instanceof Observable) {
removeWeakEventListener(oldValue, ObservableArray.changeEvent, target._onItemsChanged, target);
}
if (newValue instanceof ObservableArray) {
if (newValue instanceof Observable) {
addWeakEventListener(newValue, ObservableArray.changeEvent, target._onItemsChanged, target);
}