0

在使用 XML 构建中继器时，如上例，以后如何更新数组？

        <Repeater items="{{ letras }}" id="rep">
        <Repeater.itemsLayout>
            <StackLayout horizontalAlignment="center" orientation="horizontal" />
        </Repeater.itemsLayout>
        <Repeater.itemTemplate>
            <Button text="{{ l }}" cssClass="palavraPrincipal" />
        </Repeater.itemTemplate>
        </Repeater>

我知道如果我在 Javascript 文件上创建转发器，但在预制的 XML 转发器上创建转发器，有一种方法可以做到这一点？

4

2 回答 2

1

要在视图模型（letras示例中的数组）中进行更改，反映在 UI 中，您需要使用Native Script 的数据绑定。

下面是一个示例，鉴于您帖子中的 XML 视图，它将：

  1. 需要 2 个模块，observable（用于可观察对象）和 observable-array（用于数组）。
  2. 创建一个视图模型，它是保存数据的对象
  3. 将视图模型绑定到页面的绑定上下文。
  4. 每隔 1 秒，将一个新项目添加到视图模型（这将反映到 UI）。

我将页面的绑定上下文设置为视图模型。无需像 calebeaires 在他的示例中那样在 Repeater 元素上设置绑定上下文，因为 Repeater 将查看页面的绑定上下文。

但是，如果您愿意，您可以使用例如 2 个不同的绑定上下文，1 个用于页面，一个用于 Repeater 元素。换个就行

page.bindingContext = viewModel;

为了

page.getViewById('rep').bindingContext = viewModel;

完整代码：

var observableModule = require("data/observable");
var observableArrayModule = require("data/observable-array");

var viewModel = new observableModule.Observable({
    letras: new observableArrayModule.ObservableArray([
        { l: 'First' },
        { l: 'Second' },
        { l: 'Third' },
    ])
});

function pageLoaded(args) {
    var page = args.object;
    page.bindingContext = viewModel;
    //page.getViewById('rep').bindingContext = viewModel;

    // Add a new item every 1 second.
    setInterval(function() {
        viewModel.letras.push({
            l: 'New item'
        });
    }, 1000);
}
exports.pageLoaded = pageLoaded;
于 2015-10-13T08:33:51.780 回答
-1

查出：

A. 声明和变量：

var repeater;

B. 向转发器声明一个 ID：

<Repeater items="{{ items }}" id="rep">
 <Repeater.itemTemplate>
     <Button text="{{ $value }}" />
 </Repeater.itemTemplate> 
</Repeater>

C. 在页面加载时重新声明：

function pageLoaded(args) {
    var page = args.object;
    repeater = view.getViewById(page, "rep");
    page.bindingContext = jogo;
}
于 2015-10-12T16:18:29.720 回答