Nativescript Repeater Databinding

Question

Ich möchte eine dynamische Menüliste erstellen und Klasse auf ausgewähltes Element anwenden. Ich habe eine Reihe von Menüeinträgen, menuItems, die eine observableArray ist.

Die Seite Bindung enthält zwei Einträge:

• MenuItems
• selectedPage

Die Idee ist einfach: eine andere Klasse gilt, wenn die selectedPage Parameter den Namen der Seite gleich um dem Benutzer anzuzeigen, welche Seite gerade angezeigt wird.

Dies funktioniert nicht, also habe ich einige Tests gemacht, und eine seltsame Sache ist passiert. Wenn ich eine einfache Label in meine Repeater verwende, um meine Bindungen zu testen, kann ich auf die guten Daten zugreifen.

---

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

Anzeige der gute menuItems Eintrag Name.

---

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

Anzeige der gute selectedPage Eintrag Name.

---

Aber, diese Codebeispiele funktioniert nicht zusammen. Beide funktionieren nur unabhängig voneinander.

Also bin ich ein bisschen verloren, ist mit einem $parents basierten Selektor ändern Sie den Kontext in der Repeater?

Answer 1

Auch ich habe dieses Problem gestoßen und fand die Lösung in NativeScript's documentation on data binding:

Hinweis: Die Bindung Ausdruck kann, ohne explizit genannt Quelleigenschaft (TextField- text = „“) verwendet werden. In diesem Fall wird $ value als Quelleigenschaft verwendet. Dies könnte jedoch zu Problemen führen, wenn eine geschachtelte Eigenschaft auf Änderungen beobachtet werden soll (z. B. item.nestedProp). $ value stellt bindingContext dar und wenn eine Eigenschaft des bindingContext geändert wird, wird der Ausdruck ausgewertet. Da nestedProp keine Eigenschaft von bindingContext in item.nestedProp ist, wird kein propertyChange-Listener angehängt und Änderungen an nestedProp werden nicht zur UI hinzugefügt. Daher empfiehlt es sich, anzugeben, welche Eigenschaft als Quelleigenschaft verwendet werden soll, um solche Probleme zu vermeiden.

Was dies bedeutet ist, dass, wenn Sie eine Variable sind verbindlich, die direkt auf dem Bindungskontext gesetzt ist, können Sie den Ausdruck in den geschweiften Klammern von selbst passieren kann:

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

...aber wenn Sie eine Variable sind verbindlich, die in einem Objekt verschachtelt ist, die auf der Bindung Kontext gesetzt ist, müssen Sie diese verschachtelte Eigenschaft in den geschweiften Klammern als ersten Parameter übergeben, und den Ausdruck selbst als zweiten Parameter:

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