从 helloworld 应用程序中删除 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>

从 helloworld 应用程序中删除 nativescript listview 项目

nativescript listview item delete from helloworld app

javascript

listview

nativescript