如何添加删除按钮并使其在 nativescript 中工作

Question

我正在尝试添加删除按钮并使其正常工作，我将问题一分为二。

在我的 xml 文件中我有这个：

<Page loaded="onPageLoaded">
 <GridLayout rows="auto, *">
  <StackLayout orientation="horizontal" row="0">
   <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
     <Button cssClass="test" text="Add" tap="add"></Button>
     <Button cssClass="test" text="Refresh" tap="refresh"></Button>
  </StackLayout>
    <ListView items="{{ tasks }}" row="1">
     <ListView.itemTemplate>
       <Label text="{{ name }}" />
       <Button cssClass="test" text="X" tap="delbutton"></Button> 
   </ListView.itemTemplate>
  </ListView>
 </GridLayout>
</Page>

第一个问题是 delbutton，它是删除按钮，如果我这样添加它，它会用一堆 X 替换我的视图。我似乎不明白为什么。

我遇到的第二个问题是如何让它工作，以便循环并删除我想删除的项目，我目前正在做的是使用 [=22= 从后端服务器获取数据] 看起来像这样：

exports.onPageLoaded = function(args) {
    page = args.object;
    pageData.set("task", "");
    pageData.set("tasks", tasks);
    page.bindingContext = pageData;
    var result;
    http.request({
        url: "http://192.168.1.68:3000/posts.json",
        method: "GET",
        headers: { "Content-Type": "application/json" },
    }).then(function (response) {
        result = response.content.toJSON();
        for (var i in result) {
            tasks.push({ name: result[i].name });
        }
    }, function (e) {
        console.log("Error occurred " + e);
    });
};
exports.delbutton = function() {
    console.log("REM")
};

感谢您的帮助和时间。

Answer 1

第一个问题（仅显示 X）是由于 ListView 项目只需要一 (1) 个子项。你有两个（一个标签和一个按钮）。幸运的是，其中一项可能是 a，所以您要做的是将您的两个元素包含在 StackLayout 中，如下所示：

<Page loaded="onPageLoaded">
<GridLayout rows="auto, *">
    <StackLayout orientation="horizontal" row="0">
        <TextField width="200" text="{{ task }}" hint="Enter a task" id="task" />
        <Button cssClass="test" text="Add" tap="add"></Button>
        <Button cssClass="test" text="Refresh" tap="refresh"></Button>
    </StackLayout>
    <ListView items="{{ tasks }}" row="1">
        <ListView.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label text="{{ name }}" />
                <Label text="{{ hello }}" />
                <Button cssClass="test" text="X" tap="delbutton"></Button>
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>
</Page>

关于从 ListView 中删除项目的第二部分。我不知道您的 pageData 是否是 observable object，因为声明不是您粘贴的代码的一部分，但我猜是。无论如何，我已经创建了一个示例来说明如何使用可观察对象填充数据（这是构建 ui:s 的 NativeScript 方式，请参阅前面的 link）以及如何从 ListView 中删除项目。

我在代码中添加了注释来解释我在做什么。

var Observable = require('data/observable');
var ObservableArray = require('data/observable-array');

/**
 * Creating an observable object,
 * see documentation: https://docs.nativescript.org/bindings.html
 * 
 * Populate that observable object with an (empty) observable array.
 * This way we can modify the array (e.g. remove an item) and 
 * the UI will reflect those changes (and remove if from the ui
 * as well).
 * 
 * Observable objects are one of NativeScripts most fundamental parts
 * for building user interfaces as they will allow us to
 * change an object and that change gets propagated to the ui
 * without us doing anything.
 *
 */

var contextArr = new ObservableArray.ObservableArray();
var contextObj = new Observable.Observable({
    tasks: contextArr
});


exports.onPageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = contextObj;
    /**
     * Simulating adding data to array after http request has returned json.
     * Also adding an ID to each item so that we can refer to that when we're
     * removing it.
     */
    contextArr.push({name: 'First Item', id: contextArr.length});
    contextArr.push({name: 'Second Item', id: contextArr.length});
    contextArr.push({name: 'Third Item', id: contextArr.length});
};

exports.delbutton = function(args) {
    /**
     * Getting the "bindingContext" of the tapped item.
     * The bindingContext will contain e.g: {name: 'First Item', id: 0}
     */
    var btn = args.object;
    var tappedItemData = btn.bindingContext;

    /**
     * Iterate through our array and if the tapped item id
     * is the same as the id of the id of the current iteration
     * then remove it.
     */
    contextArr.some(function (item, index) {
        if(item.id === tappedItemData.id) {
            contextArr.splice(index, 1);
            return false;
        }
    });

};

如何添加删除按钮并使其在 nativescript 中工作

How to add delete button and making it work in nativescript

nativescript