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替换我的视图。我似乎无法理解为什么。

我遇到问题的第二个问题是如何使其工作以便循环并删除我想要删除的项目，我真正做的是从后端服务器获取数据，其中json看起来像这样：

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）个子项。你有两个（标签和按钮）。幸运的是，有一个项目可能是你要做的就是将你的两个元素包含在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，因为声明不是粘贴代码的一部分，但我猜它是。无论如何，我已经创建了一个如何使用observables填充数据的示例（这是构建ui的NativeScript方式，请参阅上一个链接）以及如何从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中工作

1 个答案: