Listview не обновляется после удаления элемента

Question

Привет, ребята. Я новичок в nativescript, и у меня возникли проблемы с просмотром списка, который не обновляет или не удаляет элемент при удалении элемента.Вот мой пример кода ...

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, он ничего не делает, кажется, что он удаляет элемент из списка, но представление вообще не обновляется ... Что может быть проблемой? Я предполагаю, что я создаю Предметы неправильно в модели представления..

Answer 1

Ну ... тут много чего не так. Сначала для обработки привязки вы должны использовать Observable Array ().

Это должно исправить то, что у вас происходит, но даже тогда у вас есть проблемы, потому что у вас нет метода, если вы знаете, какой элемент вы нажали. Ваш itemDelete предполагает, что вы автоматически удаляете второй элемент в своем списке. Это не будет очень полезно.

Я вижу, что вы копируете, пришли из компилятора машинописного текста и добавили его вместе с вашим кодом. Я попытался исправить ваш код, но решил, что я просто сделаю приложение для детской площадки, чтобы показать вам рабочий пример.

Идите на детскую площадку здесь https://play.nativescript.org/?template=play-js&id=Z5745I&v=3

Перейти к home-view-model.js.

См. Функцию getItems. Я даю вам два способа добавления элементов в ваш наблюдаемый массив

Вы можете выдвигать элементы или просто перезаписывать свойство другим наблюдаемым массивом.

Кроме того, если вы хотите передать массив вашему объекту, тогда он все равно должен быть наблюдаемым массивом, иначе страница не обновится.

Следующее, что я не знаю, почему вы также устанавливаете тайм-аут при загрузке вашей страницы. Вы хотите, чтобы это началось как можно скорее, поскольку вам нужно пойти еще, чтобы получить свои данные. Кроме того, вы запускаете это после того, как страница становится доступной, потому что вы привязываете свою модель представления к странице, поэтому снова нет причин использовать тайм-аут. Позвольте мне знать, если это помогает. Удачи. Я знаю, каково это - начать работать с Nativescript. Документация не так проста, как они надеялись, и теперь они удалили все хорошие учебники с сайта документации. Жаль, что у вас не было доступа к старому учебнику по продуктам. Это был отличный способ начать с четких кратких инструкций.

Плюс, поскольку люди здесь ненавидят ссылки (их можно взломать относительно легко, вот код в 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;