Question

您好，我是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>

items.js

const timer = require('timer');
let ItemsModel = require('../view-models/items-view-model');

ItemsModel = new ItemsModel();
function DataLoaded(args) {
  const page = args.object;
   page.bindingContext = ItemsModel;
  timer.setTimeout(() => {
        ItemsModel.getItems()
            .then((list) => {
            });
    }, 100);
}

function itemDelete() {
  page.bindingContext.items.splice(1,1);
}
module.exports = {
   DataLoaded,
   itemDelete
};

问题是，当我尝试使用itemDelete函数删除项目时，它似乎没有执行任何操作，好像它从列表中删除了元素，但是视图根本没有更新...这可能是我假设Im创建项目错误的问题。视图模型。

Answer 1

嗯...这里有很多错误。首先，为了处理绑定，您必须使用Observable Array（）。

那应该可以解决您的问题，但是即使那样您仍然会遇到问题，因为如果您知道要轻按哪个项目，就没有办法。您的itemDelete假定您正在自动删除列表中的第二个项目。那不会很有用。

我看到您要复制来自打字稿编译器，并将其与您的代码一起添加。我试图修复您的代码，但决定只做一个Playground应用程序来向您展示一个有效的示例。

去这里https://play.nativescript.org/?template=play-js&id=Z5745I&v=3的操场

转到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 frameModule = require("ui/frame");
var ItemsModel = require("./home-view-model");

var itemsModel = new ItemsModel();

exports.pageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = itemsModel;
    itemsModel.getItems();
}

exports.delete = function (args) {
    var item = args.object.bindingContext;
    let id = item.id;
    itemsModel.remove(id);
}

查看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;

删除元素后未刷新Listview

1 个答案: