TypeScript utils.unwrapObservable方法代碼示例

  /**
   * This will be called once when the binding is first applied to an element,
   * and again whenever any observables/computeds that are accessed change
   */
  public update(element: any, valueAccessor: () => any, allBindingsAccessor?: KnockoutAllBindingsAccessor,
    viewModel?: any, bindingContext?: KnockoutBindingContext): void {
    this.removePreviousContent(element);

    let unwrappedArray: any = ko.utils.unwrapObservable(valueAccessor());
    let captionValue: any;
    let filteredArray: {}[] = [];
    let itemSelected: (evt: MouseEvent) => any;

    if (unwrappedArray) {
      if (typeof unwrappedArray.length == "undefined") // Coerce single value into array
        unwrappedArray = [unwrappedArray];

      // Filter out any entries marked as destroyed
      filteredArray = ko.utils.arrayFilter(unwrappedArray, (item) => {
        return item === undefined || item === null || !ko.utils.unwrapObservable(item['_destroy']);
      });

      // If caption is included, add it to the array
      if (allBindingsAccessor['has']('optionsCaption')) {
        captionValue = ko.utils.unwrapObservable(allBindingsAccessor.get('optionsCaption'));
        // If caption value is null or undefined, don't show a caption
        if (captionValue !== null && captionValue !== undefined) {
          filteredArray.unshift({ value: "-1", text: captionValue });
        }
      }
    } else {
      // If a falsy value is provided (e.g. null), we'll simply empty the select element
    }

    if (allBindingsAccessor['has']('itemSelected'))
      itemSelected = allBindingsAccessor.get('itemSelected') as (evt: MouseEvent) => any;
    this.addNewContent(element, filteredArray, allBindingsAccessor.get('value'), itemSelected);
  }

  /**
   * This method adds all the options and also updates selected item and text
   */
  private addNewContent(element: any, options: {}[], selectedValue: KnockoutObservable<string>, itemSelected: (evt: MouseEvent) => any): void {
    const titleEl: HTMLSpanElement = element.querySelector('span');
    const listEl = element.querySelector('ul');
    let selectedValueUnwrapped: string = selectedValue && ko.utils.unwrapObservable(selectedValue);
    let selectedValueChanged: boolean = false;

    if (!listEl || !titleEl)
      throw new Error('Incorrect markup in ms-Dropdown element');

    for (let i: number = 0, len: number = options.length; i < len; i++) {
      const liEl: HTMLLIElement = document.createElement('li');
      const option = options[i];
      liEl.textContent = option['text'];
      liEl.setAttribute('aria-value', option['value']);
      liEl.setAttribute('role', 'option');
      liEl.setAttribute('aria-text', option['text']);
      liEl.className = 'ms-Dropdown-item';

      let isSelected: boolean = false;

      if (selectedValueUnwrapped && selectedValueUnwrapped === option['value'])
        isSelected = true;
      else {
        isSelected = option['selected'] === true || option['selected'] === true || option['selected'] === 'selected';
        if (isSelected) {
          selectedValueUnwrapped = option['value'];
          selectedValueChanged = true;
        }
      }

      liEl.setAttribute('aria-selected', isSelected + '');

      if (isSelected) {
        titleEl.textContent = option['text'];
        liEl.className += ' is-selected';
      }

      if (itemSelected) {
        liEl.addEventListener('click', itemSelected);
      }

      listEl.appendChild(liEl);
    }

    if (!titleEl.textContent && options.length > 0) {
      titleEl.textContent = options[0]['text'];
      listEl.children[0].setAttribute('aria-selected', 'true');
      selectedValueUnwrapped = options[0]['value'];
      selectedValueChanged = true;
    }

    if (selectedValueChanged && selectedValue)
      selectedValue(selectedValueUnwrapped);
  }

  /**
   * Open-close dropdown handler
   */
  public onOpenDropdown(vm: DropdownViewModel, evt: MouseEvent) {
    if (this.disabled())
      return;
    const isOpen: boolean = ko.utils.unwrapObservable(this.isOpen);
    evt.stopPropagation();
    this.isOpen(!isOpen);

    if (!isOpen) {
      if (DropdownViewModel._openedDropdownVM && DropdownViewModel._openedDropdownVM !== this) {
        DropdownViewModel._openedDropdownVM._onDocClick(null);
      }

      DropdownViewModel._openedDropdownVM = this;
      document.addEventListener('click', this._onDocClick);
    }
  }

  /**
   * Expand\collapse click handler
   */
  protected actionClick(ev: MouseEvent): void {
    this.isExpanded(!this.isExpanded());

    const isExpanded = this.isExpanded();

    if (isExpanded) {
      const unwrappedTerms = ko.utils.unwrapObservable(this.terms);

      if (!unwrappedTerms || !unwrappedTerms.length) {
        this.model.getChildTerms(this.entity).then((terms) => {
          const termViewModels: TermViewModel[] = [];
          terms.forEach((value) => {
            termViewModels.push(new TermViewModel(this.model, value));
          });

          this.terms(termViewModels);
        });
      }
    }
  }

 key: data => ko.utils.unwrapObservable(data.id),

 filteredArray = ko.utils.arrayFilter(unwrappedArray, (item) => {
   return item === undefined || item === null || !ko.utils.unwrapObservable(item['_destroy']);
 });