第七章 抽象视图

我们在前面提到过, 视图实际上是由工厂类派生而来的. 而所有的视图类都有一个共同的父类: 抽象视图. 本章我们就来学习一下抽象视图有哪些特性.

视图的初始化

我们在之前已经了解了WebClient的设计原理, 模型(Model),视图(Renderer), 控制器(Contrller)作为MVC的三个要素, 是靠视图(View)连接在一起的, 也就是说,我们通常所讲的表单视图(Form),树形列表视图(Tree)实际上都是一个集成了MVC的混合体, 并非传统意义上只负责渲染的视图.

因此,我们在抽象视图的构造函数中看到了三个至关重要的参数: rendererParams ,modelParams和controllerParams.

init: function (viewInfo, params) {
    this._super.apply(this, arguments);
    ...
}
  • rendererParams: 渲染视图时需要的参数
  • controllerParams: 构造控制器的参数
  • modelParams: 构造模型的参数

另外, 构造函数还对视图的控制区和搜索面板进行了初始化.

获取控制器

getController: async function () {
    const _super = this._super.bind(this);
    const { searchModel } = this.controllerParams;
    await searchModel.load();
    this._updateMVCParams(searchModel.get("query"));
    // get the parent of the model if it already exists, as _super will
    // set the new controller as parent, which we don't want
    const modelParent = this.model && this.model.getParent();
    const [controller] = await Promise.all([
        _super(...arguments),
        searchModel.isReady(),
    ]);
    if (modelParent) {
        // if we already add a model, restore its parent
        this.model.setParent(modelParent);
    }
    return controller;
},

唯一需要留意一下的就是在获取控制器的内部方法中, 实际上是先获取了模型的父类, 然后在调用了父类方法获取控制器之后, 又重新将原先的模型父类设置到模型上, 原因就是父类方法会将控制器的父类设置为新的Controller, 这破坏了我们数据的上下级关系.

获取模型

getModel: function () {
    if (!this.model) {
        this.model = this._super.apply(this, arguments);
    }
    return this.model;
},

这个方法就没什么好说的了,就是获取当前视图绑定的数据模型.

总结

抽象视图中并没有重载getRenderer方法, 也就是直接使用了工厂类的渲染方法.各类型的视图会自己重载并实现自己的渲染方法. 抽象视图在工厂类的基础上并没有增添过多的功能, 只是把接口式的方法细化了, 形成各视图的一套标准.

results matching ""

    No results matching ""