NativeScript：UI 不会在不刷新的情况下显示从 ObservableArray 中删除的项目

Question

首先，我对 NativeScript 很陌生。我按照此处https://x-team.com/blog/build-simple-todo-list-mobile-application-nativescript/ 的 ToDo 列表教程进行操作，作为我自己的一个小练习，我想为列表中的任务添加删除功能。

这是我的代码：

Tasks.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">  
<Page.actionBar>
    <ActionBar title="Tasks">
        <ActionBar.actionItems>
            <ActionItem text="New" tap="{{ insert }}" ios.position="right" />
            <ActionItem text="Delete" tap="{{ delete }}" ios.position="right" />                
        </ActionBar.actionItems>
    </ActionBar>
</Page.actionBar>
<ListView items="{{ tasks }}"></ListView>

tasks-view-model.js

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;  
var Sqlite = require("nativescript-sqlite");  
var Dialogs = require("ui/dialogs");

function createViewModel(database, listId) {  
    var viewModel = new Observable();
    viewModel.tasks = new ObservableArray([]);
    viewModel.listId = listId;

    viewModel.insert = function() {
        Dialogs.prompt("Task Name", "").then(result => {
            database.execSQL("INSERT INTO tasks (list_id, task_name) VALUES (?, ?)", [this.listId, result.text]).then(id => {
                var _string = "ID: " + id + ", " + result.text;
                this.tasks.push(_string);
            }, error => {
                console.log("INSERT ERROR", error);
            });
        });
    }

    viewModel.select = function() {
        this.tasks = new ObservableArray([]);
        database.all("SELECT id, task_name FROM tasks WHERE list_id = ?", [this.listId]).then(rows => {
            for(var row in rows) {
                var _id = rows[row][0];
                var _item = rows[row][1];
                var _string = "ID: " + _id + ", " + _item;
                this.tasks.push(_string);
            }
        }, error => {
            console.log("SELECT ERROR", error);
        });
    }

    viewModel.delete = function() {
        Dialogs.prompt("Task ID", "").then(result => {
            database.execSQL("DELETE FROM tasks WHERE id = ?", [result.text]).then(id => {
               Dialogs.prompt(id);
            }, error => {
                console.log("DELETE ERROR", error);
            });
        });
    }

    viewModel.select();

    return viewModel;
}

exports.createViewModel = createViewModel;  

在传递其 ID 时实际删除该项目可以正常工作。但是，如果没有我手动刷新 UI，则 UI 不会显示此更改，我无法弄清楚原因。万一这很重要，我会在 Android 模拟器上运行它。

提前感谢您的帮助。

Answer 1

在您的删除函数中，您还需要从 ObservableArray 中删除该项目。

viewModel.delete = function() {
    Dialogs.prompt("Task ID", "").then(result => {
        database.execSQL("DELETE FROM tasks WHERE id = ?", [result.text]).then(id => {
           Dialogs.prompt(id);

            /// remove the item from the observable array.
           this.tasks.splice(INDEX_OF_THE_ITEM_DELETED,1);


        }, error => {
            console.log("DELETE ERROR", error);
        });
    });
}

您可能需要考虑将任务的 ObservableArray 从字符串数组更改为具有id 属性和value 属性的对象数组。因此更容易确定要删除的项目的索引。如果没有，您将不得不重建推入数组的值以找到索引。