NativeScript：UIがリフレッシュせずにObservableArrayから削除されたアイテムを表示しない

Question

最初は、NativeScriptが初めてです。私はToDoリストのチュートリアルに続き、ここにはhttps://x-team.com/blog/build-simple-todo-list-mobile-application-nativescript/があります。自分自身のための少し練習として、リスト内のタスクにremove関数を追加したかったのです。

ここに私のコードです：

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> 

タスク・ビュー・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を手動でリフレッシュせずにこの変更を表示することはできません。理由を理解できません。それが重要な場合は、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); 
     }); 
    }); 
} 

あなたはid財産とvalueプロパティを持つオブジェクトの配列に文字列の配列からタスクのObservableArrayを変更することを検討することをお勧めします。したがって、削除したいアイテムのインデックスを簡単に判別できます。そうでない場合は、インデックスを見つけるために配列にプッシュされた値を再構築する必要があります。