如何添加刪除按鈕，並使其工作在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; 
     } 
    }); 

};