当viewmodel值更改时，如何更新listview？

Question

我是NS的新手，需要一些帮助才能得到一些东西，这应该很简单，有效。

我正在使用的应用程序只是一个简单的计时系统：当应用程序启动时，点击UI上的刷新按钮，它会从API下载（使用fetch）一个警报列表（这只是一个数组'秒'从中倒数）。

下载列表后，我将视图模型中的变量分配给刚刚收到的数据。我有一个列表视图绑定到此变量。

每秒我使用一个计时器将viewmodel中的所有值减1。

我的问题是listview似乎没有自动更新我对它的数据源所做的更改，计时器每秒处理一次。

我假设如果我将listview绑定到viewmodel（alarm / seconds数组）中的值，那么只要我更新任何绑定元素（在这种情况下，当计时器减少每个警报的值时），视图就会改变。

事实并非如此;在最初填充列表视图之后，它只是静态的，但计时器肯定在工作。

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.chml

    <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>

每一秒，listview元素都会根据其基础数据源所做的更改而发生变化。

Answer 1

如果要在ListView中绑定数组更改，必须注意以下几点：

1. 你在alarms和Array之间翻转ObservableArray变量。您必须始终将其保持为ObservableArray，以便可以捕获任何索引的更改。
2. 如果要替换splice的特定索引中的值，则必须使用ObservableArray。

这是一个Playground Sample