[英]How to implement on-demand sorting of data in listview via nativescript-drop-down plugin?
我正在創建一個簡單的 Nativescript 應用程序,其中包含基於數組的項目列表視圖。 我無法掌握 Observable 模塊/MVVM 模式。 我正在使用 nativescript-drop-down 來提供排序依據列表,以便對列表視圖中的數據進行排序。 頁面首次呈現時數據已正確排序,但索引更改時不會更新。
如何確保下拉列表的“selectedIndex”值正確傳遞給視圖模型並相應更新列表視圖?
我嘗試根據 model 以及“dropDownSelectedIndexChanged”function 中的 selectedIndex 進行排序。
主頁.ts
const mainPageModel = new MainPageModel();
export function navigatingTo(args: EventData) {
const page = <Page>args.object;
page.bindingContext = mainPageModel;
}
我嘗試在主頁中設置此 function 但它不會更新列表,除非導航離開然后返回頁面:
export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
if (args.newIndex == 0) {
mainPageModel.dataItems.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
} else if (args.newIndex == 1) {
mainPageModel.dataItems.sort(function (a, b) {
return b.name.localeCompare(a.name);
});
}
}
主視圖模型.ts
export class MainPageModel extends Observable {
// Dropdown populating
@ObservableProperty() dropdownItems: ObservableArray<any>;
@ObservableProperty() selectedIndex: number;
// Recipe templating
@ObservableProperty() isBusy: boolean = true;
@ObservableProperty() dataItems: ObservableArray<any>;
constructor() {
super();
this.isBusy = true;
this.dataItems = new ObservableArray<any>();
this.dropdownItems = new ObservableArray<any>();
this.selectedIndex = 0;
// Populate sort by dropdown
const items = ["Name (A-Z)", "Name (Z-A)"];
this.dropdownItems.push(items);
// Populate recipes stored locally
let storedRecipes = [];
try {
storedRecipes = appSettings.getAllKeys();
storedRecipes.forEach(element => {
this.dataItems.push(JSON.parse(appSettings.getString(element)))
});
} catch (e) {
console.log("No stored recipes")
}
// Populate recipes from placeholder data
getData().then((recipeData) => {
this.dataItems.push(recipeData);
this.isBusy = false;
// Sort recipes by index
// Done as an alternative to "dropDownSelectedIndexChanged"
if (this.selectedIndex == 0) {
this.dataItems.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
} else if (this.selectedIndex == 1) {
this.dataItems.sort(function (a, b) {
return b.name.localeCompare(a.name);
});
}
});
}
}
主頁.xml
<GridLayout columns="*,auto,auto" rows="auto,5*" >
<!-- Add  back to button -->
<Button horizontalAlignment="left" row="0" col="0" text="Add New Recipe" tap="addRecipe" class="add-button" />
<Label horizontalAlignment="right" verticalAlignment="center" text="Sort by:" col="1" row="0" padding="10" fontWeight="bold" fontSize="18" />
<dd:DropDown items="{{ dropdownItems }}" selectedIndex="{{ selectedIndex }}"
opened="dropDownOpened" closed="dropDownClosed"
selectedIndexChanged="dropDownSelectedIndexChanged"
row="0" col="2" itemsPadding="8" verticalAlignment="center" itemsTextAlignment="center" horizontalAlignment="right" />
<ListView row="1" colSpan="3" class="list-group" items="{{ dataItems }}" separatorColor="transparent">
<ListView.itemTemplate>
<GridLayout recipeData="{{ $value }}" tap="recipeDetail" route="recipe-detail/recipe-detail" rows="*,auto,auto" columns="5*, *" class="list-group-item">
<Label row="0" col="0" text="{{ name }}" class="h2" />
<Image horizontalAlignment="center" row="0" rowSpan="2" col="2" src="{{ image }}" />
</GridLayout>
</ListView.itemTemplate>
</ListView>
<ActivityIndicator row="1" colSpan="3" busy="{{ isBusy }}" class="activity-indicator" />
</GridLayout>
如果邏輯在視圖模型中,則排序在初始頁面加載時起作用,如果我 select 另一個索引,它不會改變。 或者,如果我嘗試通過“dropDownSelectedIndexChanged”function 更改“selectedIndex”值,則列表視圖不會立即排序,只會在導航離開並返回主頁后更新。
與其他方法(切片、彈出、推送)不同, sort(...)
方法不會將更改通知組件。 排序后嘗試刷新 ListView,
export function dropDownSelectedIndexChanged(args: SelectedIndexChangedEventData) {
if (args.newIndex == 0) {
mainPageModel.dataItems.sort(function (a, b) {
return a.name.localeCompare(b.name);
});
} else if (args.newIndex == 1) {
mainPageModel.dataItems.sort(function (a, b) {
return b.name.localeCompare(a.name);
});
}
(<any>event.object).page.getViewById('YourListViewId').refresh();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.