來自helloworld app的nativescript listview項目刪除

Question

我剛剛讀完並測試了nativescript helloworld app ，我無法理解，如何通過點擊刪除項目。 我理解它就像我需要在點擊后獲得數組索引才能生成.splice，但在args中我現在有這樣的數據？ 請解釋我如何做到這一點。 謝謝！

tasks.js

var observableModule = require("data/observable");
var observableArray = require("data/observable-array");
var viewModule = require("ui/core/view");

var tasks = new observableArray.ObservableArray([]);
var pageData = new observableModule.Observable();
var page;

exports.onPageLoaded = function(args) {
    page = args.object;
    pageData.set("task", "");
    pageData.set("tasks", tasks);
    page.bindingContext = pageData;
};

exports.add = function() {
    tasks.push({ name: pageData.get("task") });
    pageData.set("task", "");
    viewModule.getViewById( page, "task" ).dismissSoftInput();
};

exports.del_first = function() {
    tasks.splice(0,1);
    viewModule.getViewById( page, "task" ).dismissSoftInput();
    console.log('DEL');
};

exports.remove = function(args) {
    console.log('REM');
};

tasks.xml

<Page loaded="onPageLoaded">
    <GridLayout rows="auto, *">
        <StackLayout orientation="horizontal" row="0">
            <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
            <Button text="Add" tap="add"></Button>          
            <Button text="Delete 1st" tap="del_first"></Button>
        </StackLayout>

        <ListView items="{{ tasks }}" row="1">
            <ListView.itemTemplate>
                <StackLayout orientation="horizontal" row="0">
                    <Label text="{{ name }}" />
                    <Button text="x" tap="remove"></Button> 
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
    </GridLayout>
</Page>

Answer 1

問題是該按鈕不知道要刪除哪個任務。 除了你傳遞的值之外，它沒有傳遞任何值，即text =“x”和tap =“remove”。

因此，訣竅是將您自己的附加值分配給包含任務的id / index的按鈕，以便您可以將其與任務匹配。 您可以使用任何未分配的名稱作為按鈕屬性值和對象鍵（我選擇使用index =“{{ index }}”。所以deleteId =“{{ id }}”將同樣有效。

因此，目前執行此操作的最佳方法是對代碼進行一些小的更改：

tasks.js

var observableModule = require("data/observable");
var observableArray = require("data/observable-array");
var viewModule = require("ui/core/view");

// Pretend we loaded some records, notice the new "index" field?
//  This is what name we use in the xml, so it is: "{{ index }}"
//  Again this name can be anything you want; id, index, guid, uuid, etc...
var _tasks = [{name: 'aaa', index: 0}, {name: 'bbb', index: 1}, 
    {name: 'ccc', index: 2},{name: 'ddd', index: 3},{name: 'eee', index: 4}];

// Simple _index count since I cheated and created a fixed array; 
// the better way would be to enumerate the array 
// and set _index to the highest index found in the array.
var _index = _tasks.length;;

var tasks = new observableArray.ObservableArray(_tasks);
var pageData = new observableModule.Observable();
var page;

exports.onPageLoaded = function(args) {
  page = args.object;
  pageData.set("task", "");
  pageData.set("tasks", tasks);
  page.bindingContext = pageData;
};

exports.add = function() {
  // Note we are creating a new index, always incrementing so that the
  // _index will always be unique.   UUID's would also work.
  var newIndex = ++_index;

  // Push the name and new created index again using the same "index" field
  tasks.push({ name: pageData.get("task"), index: newIndex });
  pageData.set("task", "");
  viewModule.getViewById( page, "task" ).dismissSoftInput();
};

exports.del_first = function() {
  tasks.splice(0,1);
  viewModule.getViewById( page, "task" ).dismissSoftInput();
  console.log('DEL');
};

exports.remove = function(args) {
  // The args is a event packet, with 
  //    eventName = what event occurred 
  //    object = the object this event occurred against
  // So we need to use the target object, 
  //   then we are getting the "index" PROPERTY we assigned on it in the xml
  var target = args.object;
  var index = target.index;

  // Now we search all the tasks, to find the index that matches our
  // index that the button was pressed on.   Then we delete it and break out of the loop.
  for (var i=0;i<tasks.length;i++) {
    if (tasks.getItem(i).index === index) {
        tasks.splice(i,1);
        break;
    }
  }

  console.log('REM');
};

tasks.xml

<Page loaded="onPageLoaded">
  <GridLayout rows="auto, *">
    <StackLayout orientation="horizontal" row="0">
        <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
        <Button text="Add" tap="add"></Button>
        <Button text="Delete 1st" tap="del_first"></Button>
    </StackLayout>

    <ListView items="{{ tasks }}" row="1">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal" row="0">
                <Label text="{{ name }}" />
     <!------------ Notice the new "index" property ----------->
                <Button text="x" index="{{ index }}" tap="remove"/>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
  </GridLayout>
</Page>