Nativescript自定义控件 - 更新依赖项属性

问题描述：

我正在创建一个自定义组件，它是一个按钮列表。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); 
     } 
    } 
}

你能帮助我吗？谢谢

答

好吧，我通过数据绑定我的财产犯了一个错误。

事实上，在XML我使用该组件是这样的：

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

但在视图模型，我从来没有因为我认为在组件指定的默认值[]会创建初始化的selectedCriterias财产。

在视图模型

所以，这里是修复：

之前

this.myObject = { ID：0 };
后

this.myObject = { ID：0， selectedCriterias：[] };

Nativescript自定义控件 - 更新依赖项属性

相关推荐