Nativescript Repeater databinding

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:

注意解決方案：綁定表達式可以在沒有明確指定的源屬性（文本字段文本=「」）中。在這種情況下，$ value被用作源屬性。但是，當更改應該被觀察到嵌套屬性時（例如item.nestedProp），這可能會導致問題。 $ value表示bindingContext，當bindingContext的任何屬性被改變時，表達式將被評估。由於nestedProp不是item.nestedProp中的bindingContext的屬性，因此將不會附加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" />