Как я могу обновить listview при изменении значений viewmodel? - PullRequest
Новая
       63

Как я могу обновить listview при изменении значений viewmodel?

0 голосов
/ 17 февраля 2019

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

Приложение, с которым я играю, - это просто простая система синхронизации: когда приложение запускается иНажата кнопка «Обновить» в пользовательском интерфейсе, она загружает (используя fetch) из API список аварийных сигналов (который представляет собой просто массив «секунд» для отсчета).

Как только у меня есть списокпосле загрузки я назначаю переменную в модели представления только что полученным данным.У меня есть просмотр списка, связанный с этой переменной.

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

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

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

Это не так;после первоначального заполнения представления списка оно просто статично, но таймер, безусловно, работает. 

const ObservableArray = require("data/observable-array").ObservableArray;

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

const dialogsModule = require("ui/dialogs");

function AlarmsViewModel() {

    const viewModel = observableModule.fromObject({

        alarms: [],

        intervalId: null,

        refreshData() {

            this.alarms = [];

            if (this.intervalId) {

                clearInterval(this.intervalId);

            }

            fetch(`http://localhost:3000/alarms`).then((response) => response.json()).then((res) => {

                const alarms = res.alarms;

                this.alarms = new ObservableArray(alarms);

                this.intervalId = setInterval(() => {

                    this.alarms.forEach((alarm) => {

                        alarm--;

                    });

                }, 1000);

            }).catch(() => {

                dialogsModule.alert({

                    title: "Oops!",

                    message: "An error occured connecting to the API.",

                    okButtonText: "Got it!"

                });

            });

        }

    });

    return viewModel;
}

module.exports = AlarmsViewModel;

alarms.xml 

    <ActionBar title="Alarms" class="action-bar">

    </ActionBar>

    <StackLayout>

        <Button text="Refresh" tap="{{ refreshData }}" />

        <ListView items="{{ alarms }}">

            <ListView.itemTemplate>

                    <Label text="{{ $value }}" class="ends-in"/>

            </ListView.itemTemplate>

        </ListView>

    </StackLayout>

</Page>

То, что каждую секунду элементы списка отображаются в соответствии сизменения, внесенные в базовый источник данных.

1 Ответ

0 голосов
/ 17 февраля 2019

Вот несколько вещей, о которых вы должны позаботиться, если хотите связать изменения вашего массива в ListView,

  1. Вы переворачивали alarms переменную между Array и ObservableArray.Вы должны всегда сохранять его как ObservableArray, чтобы можно было зафиксировать изменения в любом индексе.
  2. Вы должны использовать splice, если хотите заменить значение в определенном индексе ObservableArray.

Вот Образец игровой площадки

...