Nativescript Repeater数据绑定

Question

我想创建一个动态菜单列表，并在所选项目中应用类。 我有一系列菜单条目，menuItems是observableArray。

页面绑定包含两个条目：

• 的菜单项
• 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's documentation on data binding:

中找到了解决方案

  

注意：可以在没有显式命名的源属性（TextField text =“”）的情况下使用绑定表达式。在这种情况下，$ value用作源属性。但是，当应该观察到更改的嵌套属性（例如item.nestedProp）时，这可能会导致问题。 $ value表示bindingContext，当bindingContext的任何属性发生更改时，将计算表达式。由于nestedProp不是item.nestedProp中bindingContext的属性，因此不会附加propertyChange侦听器，并且不会将对nestedProp的更改填充到UI。因此，最好指定哪个属性应该用作源属性以消除此类问题。

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

%

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

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