小目标

今天我们学习如何建立自定义的小部件

建立widgets

建立一个根节点

在于洋的dojo2学习笔记(2.第一个dojo应用)中,我们建立了一个单节点应用,建立了Biz-E-Bodies视图,这一章,我们要扩展一下,增加名字和画像,虚构的Biz-E-Bodies下的工人.在此之前,我们需要做一些重构.我们的应用现在是硬编码渲染widget的.名称变为了更适合的Banner,在main.ts中:

import { ProjectorMixin } from '@dojo/framework/widget-core/mixins/Projector';
import Banner from './widgets/Banner';

const root = document.querySelector('my-app') || undefined;

const Projector = ProjectorMixin(Banner);
const projector = new Projector();

projector.append(root);

这行代码:const Projector = ProjectorMixin(Banner);告诉应用使用Banner作为vdom的源码去渲染,为了加入另一个widget,我们建立另外的widget称之为app,用来代表整个应用.在src/widgets中打开空的App.ts.首先,我们需要加入约束依赖去建立app的widget

在文件头部加入

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v, w } from '@dojo/framework/widget-core/d';

WidgetBase类作为appwidget的基类,WidgetBase(和其子类)使用WidgetProperties接口来定义widget的公共方法,最后,v()和w()方法被用来渲染virtual DOM(以后简称vdom)节点,或widgets. vdom和widget节点根本上产生了Dnodes(dojo中所有vdom的基类)

下一个需要建立的是Banner组件,这组件我们在第一课建立.

为了实现这一点,在App.ts中加入以下代码

import Banner from './Banner';

所有依赖就位,我们修改App

加入下面的类定义

export default class App extends WidgetBase {
}

注意App类扩展了 WidgetBase,成为了泛型类并实现了WidgetProperties的接口.这使得我们的类有了一些希望在dojo中实现的属性和方法.在class之前加入了export 和default的关键字.这是标准的es6建立模块方法,也是dojo建立widget的手段.这个widget应作为默认的输出物使得其易于使用.

扫描二维码关注公众号，回复： 4522981 查看本文章

我们使用了一个简单的render方法,并将其加入app类

protected render() {
    return v('div');
}

这个方法会建立一个div虚拟节点并且没有子节点,为了把Banner渲染为div的子节点,我们使用w()函数来渲染widget.

将render更新:

protected render() {
    return v('div', [
        w(Banner, {})
    ]);
}

强制对象属性

w()函数的第二入参是必须的,即使没有需要传入的东西.这是为了确保正确的类型守护

w函数有两个入参,widget对象和对象字面量.通过TypeScript generics,字面量必须实现传入WidgetBase的接口,这种情况Banner使用WidgetProperties,并有下面的定义

export interface WidgetProperties {
    key?: string;
}

key是可选的,这里我们传入空,接下来会把Banner替换为app,做为我们应用的根

把app部件作为应用的根

把Banner替换为app

我们的App已经建立好了,可以替换Banner类作为应用的根,为了实现这一点,我们编辑main.ts

import从Banner换为app

import App from './widgets/App';

唯一要做的是在line6,把 App 传入 ProjectorMixin 函数

const Projector = ProjectorMixin(App);

做好以上几部,App部件就准备好作为应用的根来提供服务了,

下面测试一下:

如果是在本地环境,运行以下命令

dojo build -m dev -w memory -s

接着打开http://localhost:9999,可以看到Banner的<h1>tag被App的<div>包裹,一切都正常

于洋的dojo2学习笔记(4.建立widgets)

小目标

建立widgets

把app部件作为应用的根

猜你喜欢