TypeScript knockout.utils類代碼示例

  /**
   * 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);
  }

function history<T>(initialValue?: T): history.HistoryObservable<T> {
    const self = {
        latestValues: ko.observableArray([initialValue]),
        selectedIndex: ko.observable(0),
        canGoBack: ko.pureComputed(() => self.selectedIndex() > 0),
        canGoNext: ko.pureComputed(() => self.selectedIndex() < self.latestValues().length - 1)
    } as any;

    ko.utils.extend(self, history.fn);

    const result: any = ko.pureComputed({
        read: () => {
            const values = self.latestValues();
            let index = self.selectedIndex();

            if (index > values.length) {
                index = 0;
            }

            return values[index];
        },
        write: (value: any) => {
            const
                index = self.selectedIndex(),
                values = self.latestValues();

            if (value !== values[index]) {
                if (index !== values.length - 1) {
                    values.splice(index + 1);
                }

                values.push(value);
                self.selectedIndex(index + 1);
            }
        }
    }).extend({ notify: "reference" });

    ko.utils.extend(result, self);

    const oldDispose = result.dispose;
    result.dispose = function () {
        oldDispose.call(this);
        this.canGoBack.dispose();
        this.canGoNext.dispose();
    };

    return result;
}

	config(config) {
		ko.utils.arrayForEach(config.routes,(route: any) => {
			crossroads.addRoute(route.url,(requestParams) => {
				this.currentRoute(ko.utils.extend(requestParams, route.params));
			});
		});
		//crossroads.routed.add(console.log, console);
		this.activateCrossroads();
	}

  /**
   * 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);
  }

    init: function (element, valueAccessor) {
        const $element = $(element);
        let value = valueAccessor(),
            options = ko.unwrap(value),
            id = $element.attr("id"),
            oldSetup, editor;

        if (typeof options === "object") {
            value = options.value;
            delete options.value;
        }
        else {
            options = {};
        }

        if (!id) {
            id = tinymce.DOM.uniqueId();
            $element.attr("id", id);
        }

        ko.utils.extend(options, defaults);

        oldSetup = options.setup;
        options.setup = (editor) => {
            oldSetup && oldSetup.call(undefined, editor);
        };

        if ($element.is("textarea"))
            $element.val(ko.unwrap(value));
        else {
            $element.html(ko.unwrap(value));
            options.inline = true;
        }

        editor = new tinymce.Editor(id, options, tinymce.EditorManager);
        editor.on("change keyup nodechange", () => {
            if (ko.isWriteableObservable(value)) value(editor.getContent());
        });

        // To prevent a memory leak, ensure that the underlying element"s disposal destroys it"s associated editor.
        ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
            if (editor) {
                editor.remove();
                editor = null;
            }
        });

        editor.render();
    },

  /**
   * 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);
    }
  }

export function trigger(element: HTMLElement, eventType: string, eventArgs: any): void {
    let evt;
    if (doc.createEvent) {
        evt = doc.createEvent("HTMLEvents");
        evt.initEvent(eventType, true, true);
    } else {
        evt = doc.createEventObject();
        evt.eventType = eventType;
    }

    evt.eventName = eventType;
    ko.utils.extend(evt, eventArgs);

    if (doc.createEvent) {
        element.dispatchEvent(evt);
    } else {
        element.fireEvent("on" + evt.eventType, evt);
    }
}

  /**
   * 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']);
 });