Question

我是NS的新手，需要一些帮助来获得一些东西，这应该很简单，可以正常工作。

我正在使用的应用程序只是一个简单的计时系统：启动该应用程序，并点击UI上的刷新按钮后，它会从API下载（使用获取），并显示警报列表（这很简单）倒数的秒数）。

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

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

我的问题是，列表视图似乎并没有随着我对其数据源所做的更改而自动更新，该数据源由计时器每秒处理一次。

我假设如果将listview绑定到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>

listview元素每秒都会根据其基础数据源中的更改而更改。

Answer 1

要绑定ListView中的数组更改，这里需要注意的几件事，

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

这里是Playground Sample

当视图模型值更改时，如何更新列表视图？

1 个答案: