Nativescript 删除元素后未刷新Listview_Nativescript

Nativescript 删除元素后未刷新Listview

nativescript

Nativescript 删除元素后未刷新Listview,nativescript,Nativescript,大家好，我是nativescript的新手，当项目被删除时，我遇到了问题，listview没有刷新或删除项目。这是我的示例代码 ViewModel.js const observableModule = require('data/observable'); const Item = (function (_super) { __extends(Item, _super); function Item(props) { const _this = _super

大家好，我是nativescript的新手，当项目被删除时，我遇到了问题，listview没有刷新或删除项目。这是我的示例代码

ViewModel.js

const observableModule = require('data/observable');

const Item = (function (_super) {
    __extends(Item, _super);
    function Item(props) {
        const _this = _super.call(this) || this;
        _this.id = props.id;
        _this.ind = props.ind;
        _this.status = props.status;
        return _this;
    }
    return Item;
}(observableModule.Observable));


function Items(Data) {

    let viewModel = {};
    viewModel = new observableModule.fromObjectRecursive({
        items: Data || [],
    });

       viewModel.getItems = function () {
        return server.serverService()
            .then((data) => {
                const list = data.data;
                const formattedList = setListForDisplay(list);
                viewModel.tickets = formattedList;
                return formattedList;
            });
    };

}

function setListForDisplay(list) {
    if (!list.length) { return []; }
    const formattedList = [];
    list.forEach((ticket, ind) => {
        const created = dateService(ticket.created);
        item.date = new Date();
        item.index = ind;
        formattedList[ind] = new Item(item);
    });
    return formattedList;
}
module.exports = Items;

视图模块

  <lv:RadListView id="dataList" items="{{ items }}" >
                <lv:RadListView.itemTemplate>
                        <GridLayout class="ab_tp_item" tap="itemDelete" rows="*" columns="*" >
<Label row="0" col="auto"  text="random text" />
                        </GridLayout>
                </lv:RadListView.itemTemplate>
            </lv:RadListView>

问题是，当我尝试使用itemDelete函数删除项时，它不会做任何事情，看起来它从列表中删除了元素，但视图根本不会得到更新。。。如果我假设我在视图模型中以错误的方式创建项目，那么会出现什么问题呢。。。这里有很多错误。首先，为了处理绑定，必须使用可观察数组（）

这应该可以解决你正在进行的事情，但即使这样，你也有问题，因为如果你知道你点击了哪个项目，你没有一个方法。itemDelete假设您正在自动删除列表中的第二项。那没什么用

我看到您正在复制来自typescript编译器的数据，并将其与代码一起添加。我试图修复您的代码，但决定只做一个游乐场应用程序，向您展示一个工作示例

到这里的操场去

转到home-view-model.js

请参阅getItems函数。我给你两种向你的可观察数组中添加项目的方法

您可以推送项目，也可以使用另一个可观察数组覆盖属性

此外，如果要将数组传递给对象，那么它仍然需要是可观察数组，否则页面将不会刷新

下一件事是，我也不知道为什么要设置页面加载超时。您希望尽快开始，因为您必须到其他地方获取数据。另外，在页面可用后运行此操作会导致将视图模型绑定到页面，因此也没有理由使用超时。让我知道这是否有帮助。祝你好运我知道刚开始使用Nativescript的感觉。文档并不像他们希望的那样直截了当，他们现在已经从docs网站上删除了所有好的教程。希望你能读到旧杂货教程。这是一个很好的方式开始与明确简洁的指示

另外，因为这里的人讨厌链接（他们可以相对容易地被破坏，下面是3个文件中的代码）

查看XML

<Page 
loaded="pageLoaded" 
class="page" 
xmlns:lv="nativescript-ui-listview"
xmlns="http://www.nativescript.org/tns.xsd">

<ActionBar title="Home" class="action-bar">
</ActionBar>
<StackLayout>
    <lv:RadListView items="{{ items }}">
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label fontSize="20" text="{{ userId }}" />
                <Label fontSize="14" text="{{ title }}" />
                <Button text="Delete" tap="delete"/>
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</StackLayout>

视图模型JS

var observableModule = require("data/observable");
var ObservableArray = require("data/observable-array").ObservableArray;
var http = require("http");


function HomeViewModel(Data) {
    var viewModel = observableModule.fromObject({
    items: Data || new ObservableArray(),
 });

viewModel.emptyList = function () {
    while (this.items.length) {
        this.items.pop();
    }
}

viewModel.remove = function (node) {
    let index = this.items.map(function (e) { return e.id;}).indexOf(node);
    this.items.splice(index, 1); 
} 

viewModel.getItems = function () {
    var vm = this;
    /* 
    * Way One If you don't need to normalize the data
    */

    /* 
        return http.getJSON("https://jsonplaceholder.typicode.com/posts")
          .then((response) => {
              vm.items = new ObservableArray(response);
          }, (e) => {
              console.log(e.message);
          }); 
    */

   /* 
    * Way TWo If you need to normalize the data
    */
     return http.getJSON("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
          let length = response.length;
          for (var i = 0; i < length; i++) {
              let el = response[i];
              el.title = 'Something different ' + i;
              vm.items.push(el);
          }
      }, (e) => {
          console.log(e.message);
      }); 
    };
    return viewModel;
}

module.exports = HomeViewModel;

var observableModule=require（“数据/可观察”）；
var ObservableArray=要求（“数据/可观测数组”）。ObservableArray；
var http=require（“http”）；
函数HomeViewModel（数据）{
var viewModel=observableModule.fromObject({
项目：数据| |新ObservableArray（），
});
viewModel.emptyList=函数（）{
while（this.items.length）{
this.items.pop（）；
}
}
viewModel.remove=函数（节点）{
让index=this.items.map（函数（e）{returne e.id；}）.indexOf（节点）；
本标准中的项目拼接（索引1）；
} 
viewModel.getItems=函数（）{
var vm=这个；
/* 
*如果不需要规范化数据，方法一
*/
/* 
返回http.getJSON（“https://jsonplaceholder.typicode.com/posts")
。然后（（响应）=>{
vm.items=新的ObservableArray（响应）；
}，（e）=>{
控制台日志（e.message）；
}); 
*/
/* 
*如果需要规范化数据，方法二
*/
返回http.getJSON（“https://jsonplaceholder.typicode.com/posts")
。然后（（响应）=>{
设长度=响应长度；
对于（变量i=0；i{
控制台日志（e.message）；
}); 
};
返回视图模型；
}
module.exports=HomeViewModel；

嗯……这里有很多错误。首先，为了处理绑定，必须使用可观察数组（）

这应该可以解决您的问题，但即使这样，您也会遇到问题，因为如果知道您点击了哪个项目，您没有方法。您的itemDelete假定您正在自动删除列表中的第二个项目。这不会很有用