TypeScript d.w函数代码示例

	// prettier-ignore
	protected render() {
		const { errors, email, password, username, inProgress = false } = this.properties;

		return v('div', { classes: 'auth-page' }, [
			v('div', { classes: ['container', 'page'] }, [
				v('div', { classes: 'row' }, [
					v('div', { classes: ['col-md-6', 'offset-md-3', 'col-xs-12'] }, [
						v('h1', { classes: 'text-xs-center' }, ['Sign Up']),
						v('p', { classes: 'text-xs-center' }, [w(Link, { to: 'login' }, ['Have an account?'])]),
						errors ? w(ErrorList, { errors }) : null,
						v('form', { onsubmit: this._onRegister }, [
							v('fieldset', [
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(username, 'Username', this._onUsernameInput)
								]),
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(email, 'Email', this._onEmailInput)
								]),
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(password, 'Password', this._onPasswordInput)
								]),
								v('button', {
									classes: ['btn btn-lg', 'btn-primary', 'pull-xs-right'],
									disabled: inProgress,
									type: 'submit'
								}, ['Sign Up'])
							])
						])
					])
				])
			])
		]);
	}

	render() {
		return v('div', {}, [
			w(Checkbox, {
				label: 'Use Dojo Theme',
				onChange: this.themeChange
			}),
			w(Calendar, {
				month: this._month,
				selectedDate: this._selectedDate,
				theme: this._theme,
				year: this._year,
				onMonthChange: (month: number) => {
					this._month = month;
					this.invalidate();
				},
				onYearChange: (year: number) => {
					this._year = year;
					this.invalidate();
				},
				onDateSelect: (date: Date) => {
					this._selectedDate = date;
					this.invalidate();
				}
			}),
			this._selectedDate ? v('p', [ `Selected Date: ${this._selectedDate.toDateString()}` ]) : null
		]);
	}

	render() {
		return v('div', [
			v('h1', {}, ['Label Examples']),
			v('h3', {}, ['Label assigned as string without extra options']),
			v('div', { id: 'example-1'}, [
				w(Label, {
					label: 'Type something'
				}, [
					v('input', {
						type: 'text',
						placeholder: '...'
					})
				])
			]),
			v('h3', {}, ['Hidden label after the input']),
			v('div', { id: 'example-2'}, [
				w(Label, {
					label: {
						content: 'Can\'t read me!',
						hidden: true,
						before: false
					}
				}, [
					v('input', {
						type: 'text',
						placeholder: 'Type something'
					})
				])
			])
		]);
	}

	render() {
		const { filter } = this.properties;
		const messages = this.localizeBundle(appBundle);

		return v('ul', { classes: this.theme(css.filters) }, [
			v('li', [
				w(Link, {
					key: 'all',
					classes: this.theme(filter === 'all' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'all' }
				}, [ messages.filterAll ]),
				w(Link, {
					key: 'active',
					classes: this.theme(filter === 'active' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'active' }
				}, [ messages.filterActive ]),
				w(Link, {
					key: 'completed',
					classes: this.theme(filter === 'completed' ? css.selected : null),
					to: 'view',
					isOutlet: true,
					params: { filter: 'completed' }
				}, [ messages.filterCompleted ])
			])
		]);
	}

	protected render() {
		return w(Menu, { onSelected: this._onSelected }, [
			w(MenuItem, { key: 'a', title: 'Menu Item A' }),
			w(MenuItem, { key: 'b', title: 'Menu Item B', selected: true }),
			w(MenuItem, { key: 'c', title: 'Menu Item C' })
		]);
	}

	protected render() {
		const { view } = this.properties;

		return v('ul', {
			classes: this.theme(css.viewChooser)
		}, [
			v('li', [
				w(Link, {
					key: 'list',
					to: 'view',
					isOutlet: true,
					params: { view: 'list' },
					classes: this.theme([ css.list, view === 'list' ? css.active : null ])
				})
			]),
			v('li', [
				w(Link, {
					key: 'card',
					to: 'view',
					isOutlet: true,
					params: { view: 'card' },
					classes: this.theme([ css.cards, view === 'card' ? css.active : null ])
				})
			])
		]);
	}

	protected render() {
		const { article, article: { author, favorited } } = this.properties;

		let buttonClasses = ['btn', 'btn-outline-primary', 'btn-sm', 'pull-xs-right'];
		if (favorited) {
			buttonClasses = ['btn', 'btn-primary', 'btn-sm', 'pull-xs-right'];
		}

		return v('div', { classes: 'article-preview' }, [
			v('div', { classes: 'article-meta' }, [
				w(Link, { to: 'user', params: { username: author.username } }, [v('img', { src: author.image })]),
				v('div', { classes: 'info' }, [
					w(Link, { classes: 'author', to: 'user', params: { username: author.username } }, [
						author.username
					]),
					v('span', { classes: 'date' }, [new Date(article.createdAt).toDateString()])
				]),
				v('button', { onclick: this._onFav, classes: buttonClasses }, [
					v('i', { classes: 'ion-heart' }),
					v('span', [` ${article.favoritesCount}`])
				]),
				w(Link, { classes: 'preview-link', to: 'article', params: { slug: article.slug } }, [
					v('h1', [article.title]),
					v('p', [article.description]),
					v('span', ['Read more...'])
				])
			])
		]);
	}

		getChildrenNodes: function (this: Widget<MainSectionProperties>): DNode[] {
			const { properties: { activeFilter, todos, allCompleted: checked } } = this;

			return [
				w('checkbox', { checked, onChange: todoToggleAll, classes: [ 'toggle-all' ]}),
				w('todo-list', { todos, activeFilter })
			];
		}

	protected render() {
		return v('div', { classes: 'home-page' }, [
			w(Banner, {}),
			v('div', { classes: ['container', 'page'] }, [
				v('div', { classes: 'row' }, [w(FeedsContainer, {}), w(TagsContainer, {})])
			])
		]);
	}

	private _unauthenticatedMenu(): DNode[] {
		const { route } = this.properties;
		return [
			v('li', { key: 'sign-in', classes: 'nav-item' }, [
				w(Link, { classes: ['nav-link', route === 'login' ? 'active' : null], to: 'login' }, ['Sign In'])
			]),
			v('li', { key: 'sign-up', classes: 'nav-item' }, [
				w(Link, { classes: ['nav-link', route === 'register' ? 'active' : null], to: 'register' }, ['Sign Up'])
			])
		];
	}