import * as ko from 'knockout' ; import { Version } from '@microsoft/sp-core-library' ; import { IPropertyPaneConfiguration , PropertyPaneTextField } from '@microsoft/sp-property-pane' ; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base' ; import * as strings from 'HelloWorldWebPartStrings' ; import HelloWorldViewModel , { IHelloWorldBindingContext } from './HelloWorldViewModel' ; let _instance = 0 ; export interface IHelloWorldWebPartProps { description : string ; } export default class HelloWorldWebPart extends BaseClientSideWebPart < IHelloWorldWebPartProps > { private _id : number ; private _componentElement : HTMLElement ; private _koDescription : KnockoutObservable < string > = ko . observable ( '' ) ; /**
     * Shouter is used to communicate between web part and view model.
     */ private _shouter : KnockoutSubscribable < { } > = new ko . subscribable ( ) ; /**
     * Initialize the web part.
     */ protected onInit ( ) { this . _id = _instance ++ ; const tagName = `ComponentElement-${ this . _id }` ; this . _componentElement = this . _createComponentElement ( tagName ) ; this . _registerComponent ( tagName ) ; this . _koDescription . subscribe ( ( newValue ) => { this . _shouter . notifySubscribers ( newValue , 'description' ) ; } ) ; const bindings = { description : this . properties . description , shouter : this . _shouter } ; ko . applyBindings ( bindings , this . _componentElement ) ; return super . onInit ( ) ; } public render ( ) { if ( ! this . renderedOnce ) { this . domElement . appendChild ( this . _componentElement ) ; } this . _koDescription ( this . properties . description ) ; } private _createComponentElement ( tagName ) { const componentElement = document . createElement ( 'div' ) ; componentElement . setAttribute ( 'data-bind' , `component: { name: "${ tagName }", params: $data }` ) ; return componentElement ; } private _registerComponent ( tagName ) { ko . components . register ( tagName , { viewModel : HelloWorldViewModel , template : require ( './HelloWorld.template.html' ) , synchronous : false } ) ; } protected get dataVersion ( ) : Version { return Version . parse ( '1.0' ) ; } protected getPropertyPaneConfiguration ( ) { return { pages : [ { header : { description : strings . PropertyPaneDescription } , groups : [ { groupName : strings . BasicGroupName , groupFields : [ PropertyPaneTextField ( 'description' , { label : strings . DescriptionFieldLabel } ) ] } ] } ] } ; } }