Creating a customized control in Nativescript: Enhancing Dependency Properties

Question

Creating a customized control in Nativescript: Enhancing Dependency Properties

I am currently developing a custom component that consists of a list of buttons.

Whenever a user clicks on a button, I modify its CSS class and then I want to add it to a custom property called "selectedItems" in order to retrieve it in my ViewModel.

However, when I try to push the button into the "selectedItems" array property, no event is triggered and I do not receive the information. I have also attempted to reset the entire array with no success.

I am unsure about how to proceed with this issue.

Below is the code for my component:

import {WrapLayout} from "ui/layouts/wrap-layout";
import {EventData} from "data/observable";
import {ValueButton} from "./value-button";
import dependencyObservableModule = require("ui/core/dependency-observable");

// Rest of the code continues as provided...

Could you provide some assistance?

data-binding typescript nativescript

Answer 1

Answer №1

It turns out I made an error by databinding my property.

Within the XML, I utilized the component in the following way:

<vs:ValuesSelector items="{{ criterias }}" selectedItems="{{ myObject.selectedCriterias }}" />

I assumed that the default value of [] specified in the component would create the selectedCriterias property, but in reality, I never initialized it in the ViewModel.

To rectify this issue in the ViewModel, here is the solution:

Before

this.myObject = { id : 0 };
After

this.myObject = { id : 0, selectedCriterias: [] };

Answer 2

It turns out I made an error by databinding my property.

Within the XML, I utilized the component in the following way:

<vs:ValuesSelector items="{{ criterias }}" selectedItems="{{ myObject.selectedCriterias }}" />

I assumed that the default value of [] specified in the component would create the selectedCriterias property, but in reality, I never initialized it in the ViewModel.

To rectify this issue in the ViewModel, here is the solution:

Before

this.myObject = { id : 0 };
After

this.myObject = { id : 0, selectedCriterias: [] };

Creating a customized control in Nativescript: Enhancing Dependency Properties

Answer №1

Similar questions

Content method in Esri Maps PopupTemplate is executed only once for each feature

Determine the return type of a function based on the parameter type that is inferred

The wildcard syntax for importing statements in Angular 2

How do you switch the chart type by clicking on the dropdown menu in Angular and TypeScript, using Highcharts?

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

Issues within the team relating to the assortment of items in the shopping cart

Error: The identifier HTMLVideoElement has not been declared

Is there a way to turn off linting while utilizing vue-cli serve?

Jasmine: utilizing unit test to spy on the invocation of a nested function

Navigate back to the initial page in Ionic2 using the navpop function

Where does tsc retrieve its definitions from when utilizing npm definitions?

Tips on utilizing index and eliminating React Warning: Ensure every child within a list has a distinct "key" prop

Encountering a problem while attempting to host an Angular application on localhost:4200

Rule in ESLint mandating return type for arrow functions

Issue with PassportJS and Express 4 failing to properly store cookies/session data

What is the best way to transform accented characters into standard Latin characters in typescript?

Next.js is experiencing issues with the build process

Is there a way to create a TypeScript function that can accept both mutable and immutable arrays as arguments?

Creating a Typescript Library that Relies on Web Assembly?

Execute consecutive Angular2 functions in a sequential manner, one following the next