Nativescript Repeater数据库

Question

我想要创建一个动态菜单列表，并在选定的项目上应用类。我有一个菜单项数组，menuItems是一个observableArray。

页面绑定包含两个条目：

• menuItems
• selectedPage

​

​

其思想很简单:当selectedPage参数等于页面名时应用不同的类，以指示当前显示的页面。

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

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

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

显示好的menuItems条目名。

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

显示好的selectedPage条目名。

但是，这些代码示例不一起工作。两种方法都是独立工作的。

所以，我有点迷路了，是使用基于$parents的选择器改变Repeater内部的上下文吗？

Answer 1

我也遇到了这个问题，并在NativeScript关于数据绑定的文档：中找到了解决方案。

注意:绑定表达式可以在不显式命名源属性( TextField text="“)的情况下使用。在这种情况下，$value被用作源属性。但是，这可能会导致在发生更改时应该观察嵌套属性(例如，item.nestedProp)时出现问题。$value表示bindingContext，当更改bindingContext的任何属性时，表达式将被计算。因为nestedProp不是bindingContext在item.nestedProp中的一个属性，所以不会附加propertyChange侦听器，并且不会将对nestedProp的更改填充到UI中。因此，为了消除这些问题，指定应该使用哪些属性作为源属性是一种良好的做法。

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

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

如果要绑定一个嵌套在绑定上下文上的对象中的变量，则必须将该嵌套属性作为第一个参数传递到花括号中，将表达式本身作为第二个参数：

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