如何添加删除按钮，并使其工作在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的。我似乎无法理解为什么。

我遇到的第二个问题是如何使它工作，以便它通过并删除我想要删除的项目，什么im cyrrently正在获取数据形式的后端服务器与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：s的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; 
     } 
    }); 

};