视图

视图负责呈现页面内容,可将内容呈现在页面的某个容器元素内。

视图的内容或者说模版定义在一个 .html 文件中。而控制视图内容呈现的脚本(视图模型)定义在相同目录下相同文件名的 .js 文件中。

视图模版的内容就是普通的 html 文档

视图模型是一个 jquery ui 的 widget,继承自一个视图基类,其扩展原型定义写在了对应的js文件里。跟其他 jquery widget 不同的是,视图 widget 的具体呈现内容和行为由该页面自身的业务决定,而不是像 datepicker 等插件一样有固定的外观和行为。

一个简单的视图

文件:~/views/spa/simpleview.html

  • 视图模版,包含一个 class=“text” 的标题标签。

文件:~/views/spa/simpleview.js

  • 视图模型定义,定义格式是 requirejs 的模块定义,返回一个字面量对象,这个对象会做为视图模型 widget 的原型定义。

视图呈现的页面代码

  • 指定视图呈现在页面的哪个元素里。

视图呈现js调用代码

  • 调用 Viewer.render 方法呈现视图。,第一个参数是要在其中呈现的元素,第二个参数是视图模版文件的路径。

视图基类

系统定义了一个视图基类,所有视图都必须直接或间接继承自该基类。该视图基类定义了一些基本的选项,属性和方法。

选项

  • url

    • 类型:String
    • 默认值:null
    • 说明:视图对应的html模版文件url绝对路径。
  • pageTitle

    • 类型:String
    • 默认值:null
    • 说明:页面标题,如果设置了值,则页面标题会相应修改

方法

视图基类继承 jquery ui 的 widget 基类,重写了 _create 方法,在该方法里定义了视图的一些共同行为,例如设置页面标题,监听 hashChange 事件,调用设置属性和绑定数据的虚方法供具体视图实现。

  • props

    • 参数:
    • 说明:设置页面属性,供方法引用,例如页面元素的 jquery 对象,初始数据等,可以在该方法里设置。
  • bind

    • 参数:
    • 说明:绑定页面数据。
  • hashChanged

    • 参数:
    • 说明:页面 hash 值改变时,会调用该方法。
  • viewChanged

    • 参数:
    • 说明:视图改变时,调用该方法。
  • subviewChanged

    • 参数:
    • 说明:子视图改变时,调用该方法。
  • queryChanged

    • 参数:
    • 说明:hash值里的查询字符串改变时,会调用该方法。

视图管理器

一般不直接实例化视图,而是通过视图管理器 Viewer 的方法实例化视图。Viewer是个静态类,有两个创建视图的静态方法。

  • render

    • 参数:
      • $el: 视图在该元素内呈现。
      • url: 视图模版文件的 url ,以 .html 为后缀。视图模型文件按约定为相同路径下相同文件名,后缀为 .js 的文件。
      • options: 选项,有如下三个属性:
        • viewRender: 视图渲染方法。路由器里调用该render方法的方法,传给视图,方便在有些情况下,在视图逻辑里重新渲染视图。
        • viewAttached: 视图附加到页面后的回调方法。
        • viewModelResolved: 视图模型文件加载后的回调方法。
    • 说明:设置页面属性,供方法引用,例如页面元素的 jquery 对象,初始数据等,可以在该方法里设置。
  • pop

    • 参数:
    • 说明:创建视图弹出层。

路由视图

视图管理器的方法可以手工调用,但更多时候是由路由器调用。详见下一节内容。

视图切换动画

使用 css3 做视图切换的动画效果,只需在视图模版的根元素上加上动画样式类即可,例如加上样式类 animatedfadeInRight 会达到从右向左的淡入效果。