Nativescript Repeater 数据绑定

Question

我想创建一个动态菜单列表，并在所选项目上应用 class。我有一个菜单条目数组，menuItems 这是一个 observableArray.

页面绑定包含两个条目：

菜单项
已选择页面

想法很简单：当 selectedPage 参数等于页面名称时应用不同的 class 以向用户指示当前显示的页面。

<Repeater items="{{menuItems}}" id="repeater">
  <Repeater.itemTemplate>
    <Label text="{{name}}" class="{{ $parents['Page'].selectedPage == name ? 'selected' : '' }}" tap="navigate" />
  </Repeater.itemTemplate>
</Repeater>

这不行，所以我做了一些测试，然后发生了一件奇怪的事情。当我在我的 Repeater 中使用一个简单的 Label 来测试我的绑定时，我可以访问良好的数据。

<Label text="{{name}}"/>

显示好的menuItems条目名称。

<Label text="{{$parents['Page'].selectedPage}}"/>

显示好的 selectedPage 条目名称。

但是，这些代码示例不能一起工作。两者都只能独立工作。

所以，我有点迷路了，是否使用基于 $parents 的选择器更改 Repeater 中的上下文？

Answer 1

我也遇到过这个问题，在NativeScript's documentation on data binding:

中找到了解决方案

Note: Binding expression could be used without explicitly named source property ( TextField text="" ). In that case $value is used as a source property. However this could lead to problems when a nested property should be observed for changes (e.g. item.nestedProp). $value represents bindingContext and when any property of the bindingContext is changed expression will be evaluated. Since nestedProp is not a property of the bindingContext in item.nestedProp then there will be no propertyChange listener attached and changes to nestedProp will not be populated to UI. So it is a good practice to specify which property should be used as source property in order to eliminate such issues.

这意味着当您绑定直接在绑定上下文中设置的变量时，您可以将表达式本身传递到大括号中：

    <Label text="{{name}}" class="{{ mySelectedPage == name ? 'selected' : '' }}" tap="navigate" />

...但是如果您要绑定嵌套在绑定上下文中设置的对象中的变量，则必须将嵌套的属性作为第一个参数传递到大括号中，然后表达式本身作为第二个参数：

<Label text="{{name}}" class="{{ $parents['Page'].selectedPage, $parents['Page'].selectedPage == name ? 'selected' : '' }}" tap="navigate" />

Nativescript Repeater 数据绑定

Nativescript Repeater databinding

data-binding

repeater

nativescript