Пользовательский элемент управления Nativescript — свойство зависимости обновления

Я создаю пользовательский компонент, который представляет собой список кнопок.

Когда пользователь нажимает кнопку, я изменяю ее класс css, а затем я хотел бы добавить его в пользовательское свойство «selectedItems», чтобы получить его в моей ViewModel.

Когда я нажимаю на свойство массива "selectedItems", никакое событие не возникает, и я не получаю информацию. Кроме того, я попытался переустановить весь массив, но не лучше.

Я не знаю, как этого добиться.

Вот код моего компонента:

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

export class ValuesSelector extends WrapLayout {
    public static itemsProperty = new dependencyObservableModule.Property(
        "items",
        "ValuesSelector",
        new dependencyObservableModule.PropertyMetadata(
            [],
            dependencyObservableModule.PropertyMetadataSettings.None,
            function(data: dependencyObservableModule.PropertyChangeData) {
                if (data.newValue) {
                    let instance = <ValuesSelector>data.object;
                    instance.items = data.newValue;
                }
            }));

    public static deleteOnClickProperty = new dependencyObservableModule.Property(
        "deleteOnClick",
        "ValuesSelector",
        new dependencyObservableModule.PropertyMetadata(
            false,
            dependencyObservableModule.PropertyMetadataSettings.None));

    public static selectedItemsProperty = new dependencyObservableModule.Property(
        "selectedItems",
        "ValuesSelector",
        new dependencyObservableModule.PropertyMetadata(
            [],
            dependencyObservableModule.PropertyMetadataSettings.None));

    public static singleSelectionProperty = new dependencyObservableModule.Property(
        "singleSelection",
        "ValuesSelector",
        new dependencyObservableModule.PropertyMetadata(
            false,
            dependencyObservableModule.PropertyMetadataSettings.None));

    public get selectedItems() {
        return this._getValue(ValuesSelector.selectedItemsProperty);
    }
    public set selectedItems(value: any[]) {
        this._setValue(ValuesSelector.selectedItemsProperty, value);
    }

    public get deleteOnClick() {
        return this._getValue(ValuesSelector.deleteOnClickProperty);
    }
    public set deleteOnClick(value: boolean) {
        this._setValue(ValuesSelector.deleteOnClickProperty, value);
    }

    public get singleSelection() {
        return this._getValue(ValuesSelector.singleSelectionProperty);
    }
    public set singleSelection(value: boolean) {
        this._setValue(ValuesSelector.singleSelectionProperty, value);
    }

    public get items() {
        return this._getValue(ValuesSelector.itemsProperty);
    }
    public set items(value: any) {
        this._setValue(ValuesSelector.itemsProperty, value);
        this.createUI();
    }

    private _buttons: ValueButton[];

    constructor() {
        super();
        this.orientation = "horizontal";
        this._buttons = [];
    }

    private createUI() {
        this.removeChildren();
        let itemsLength = this.items.length;

        for (let i = 0; i < itemsLength; i++) {
            let itemButton = new ValueButton();
            itemButton.text = this.items[i].label;
            itemButton.value = this.items[i];
            itemButton.className = "values-selector-item";

            if (this.deleteOnClick) {
                itemButton.className = "values-selector-selected-item";
            }

            itemButton.on(ValueButton.tapEvent, (data: EventData) => {
                let clickedButton = <ValueButton>data.object;

                if (this.deleteOnClick) {
                    let itemIndex = this.items.indexOf(clickedButton.value);
                    if (itemIndex > -1) {
                        let newSelectedItems = this.items;
                        newSelectedItems.splice(itemIndex, 1);
                        this.items = newSelectedItems;
                    }
                    return;
                }

                let internalSelectedItems = this.selectedItems;

                if (clickedButton.className === "values-selector-item") {
                    if (this.singleSelection && this.selectedItems.length > 0) {
                        internalSelectedItems = [];

                        for (let i = 0; i < this._buttons.length; i++) {
                            this._buttons[i].className = "values-selector-item";
                        }
                    }
                    internalSelectedItems.push(clickedButton.value);

                    clickedButton.className = "values-selector-selected-item";
                } else {
                    let itemIndex = internalSelectedItems.indexOf(clickedButton.value);
                    if (itemIndex > -1) {
                        internalSelectedItems.splice(itemIndex, 1);
                    }

                    clickedButton.className = "values-selector-item";
                }

                this.selectedItems = internalSelectedItems;
            }, this);

            this._buttons.push(itemButton);
            this.addChild(itemButton);
        }
    }
}

Вы можете помочь мне ? Спасибо


person Guillaume    schedule 15.03.2016    source источник


Ответы (1)


Хорошо, я сделал ошибку, привязав данные к своей собственности.

Фактически, в XML я использую такой компонент:

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

Но в ViewModel я никогда не инициализировал свойство selectedCriterias, потому что думал, что значение по умолчанию [], указанное в компоненте, создаст его.

Итак, в ViewModel вот исправление:

  • До

    this.myObject = {идентификатор: 0};

  • После

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

person Guillaume    schedule 15.03.2016