基于dojo模板的widget

简介: 参考:http://niweiwei.iteye.com/blog/1539863         http://dojotoolkit.org/reference-guide/1.8/dijit/_TemplatedMixin.html         http://thoughtfly.iteye.com/blog/1489620 准备开始 Dijit’s的_Widget和_WidgetBase胃创建widgets提供了一个极好的基础,但是_Templated的混合特性是Dijit真正出众的地方。

参考:http://niweiwei.iteye.com/blog/1539863

        http://dojotoolkit.org/reference-guide/1.8/dijit/_TemplatedMixin.html

        http://thoughtfly.iteye.com/blog/1489620

准备开始

Dijit’s的_Widget和_WidgetBase胃创建widgets提供了一个极好的基础,但是_Templated的混合特性是Dijit真正出众的地方。用_TemplatedMixin,你可以快速创建高度可维护性、快速维护性和易操作的widgets。

_TemplatedMixin的基础概念是足够简单的:它允许开发者去创建一个带有一些小扩展的小HTML文件,在运行时加载这个HTML文件作为一个字符串,它被模板Widget的所有实例重用。

 

让我们穿行_TemplatedMixin所定义的(为什么),然后用它的功能从头开始建造一个widget。

_TemplatedMixin所提供的

对工作开发者来说,把_TemplatedMixin混合进一个widget定义,因为要用外部的模板,这里值讨论下面这个一个属性:

templateString,//  a string representing the HTML of the template

 

 

用_TemplatedMixin

为了确保你自定义的widget是"templatable",所有你需要做的是为你的widget增加"dijit/_Templated"作为类声明数组的第二个参数。

例如,一个SomeWidget的widget可能会像这样声明:

 

require(["dojo/_base/declare", "dijit/_Widget", "dijit/_dijit/_TemplatedMixin", "dojo/text!./templates/SomeWidget.html"],
        function(declare, _Widget, _Templated, template) {
     
    return declare("example.SomeWidget", [_Widget, _Templated], {
        templateString: template
        //  your custom code goes here
    });
     
});

注意:Dijit依附一个标准,通过在JavaScript声明的同一层级创建一个叫做"templates"的单独目录——我们建议你在你自己的代码中遵循此标准。

注意在上面我们的声明中,我们用templateString属性与一个模板相连,此模板通过dojo/text!{path}来加载。这是设置引用到你模板文件的推荐方式,因为它确保了文件能够被异步加载和当创建一个Dojo工具箱的构建时能适度整合。

现在我们基于模板来建立我们的widget声明。让我们写一个模板和讨论一些特别在他们中可用的hooks。

写模板

一个模板就是一个HTML文档碎片,在里面你定义一个DOM结构,伴随任意特别的”hooks“,把事物返回到你的widget声明里。在我们投入到这些hooks中的每一个之前,看一个快速的例子,在一个模板里变量替换如何发生。这里是我们的SomeWidget的假想模板:

 

div class="${baseClass}" data-dojo-attach-point="focusNode" data-dojo-attach-event="ondijitclick:_onClick" role="menuitem" tabindex="-1">
    <span data-dojo-attach-point="containerNode"></span>

</div>

在简单的同事,这个模板展示了Dijit模板系统三个最重要的方面:变量替换、附着点、事件附着

注意:当你定义一个模板的时候,只能有一个根节点定义(就像XML文档)。在顶层的多节点是不被允许的。

变量替换

一个模板通过使用简单的变量占位符语法把值设置在提供的DOM上,看起来像这个:
${property}
这个变量的名字是你的widget声明里的任何属性或者字段定义。上述的例子使用了baseClass属性(在任何widget都是可用的),但是自定义字段也是一样的使用方法—例如,我们在我们的SomeWidget里定义了一个属性叫 foo,我们可以简单的使用${foo}在我们的模板里。如果这个属性碰巧是一个对象的引用,如果你想使用这个对象里的属性值,你可以很容易的做这个通过正常的对象引用符号:
${propertyObject.property}
 
为了预防_Templated中字符串的避免引号,可以再变量名称钱放置"!",像这样:
${!property}
注意:自从Dijit1.5起,在模板里使用变量替换仅仅为那些在widget生命周期中不会改变的那些值。如果你期望在应用程序编程阶段去设置值,我们建议你用widget的postCreate方法去设置任意的变量。

附着点

Dijit的模板系统有一个特别的属性,它可以再你的模板中找到,叫做data-dojo-attach-point,也就是附着点。当你用data-dojo-attach-point来定义一个DOM元素用时,可以在你的js文件中通过名字来直接引用这个节点元素。刚开始接触这个的时候,跟同事讨论,为什么不用id,然后在js文件中用document来获取或者dojo,dijit自带的方法获取,其实这样做有好处的的,避免了ID的冲突,因为在一个完整的应用中可能有多个widget,而id可能会相同,如果真有id相同那么通过document获取的就不知是哪一个了。例如:对于SomeWidget,模板定义 了两个DOM元素。在你的代码里,主元素可以通过属性focusNode引用,内部的span元素可以通过属性containerNode 来引用。

一般的,你模板的根节点变成你widget的domNode属性,因此一般在定义里不需要包含一个附着点属性。然而,有时候,在Dijit里这么做是允许跟节点也可以和其他子系统进行作用,诸如Dijit的焦点管理。

事件附着

除了附着点之外,Dijit模板系统给你提供了一个把native 的DOM事件附着到你自定义widget里方法的方式。它通过使用

HTML5数据属性data-dojo-attach-event来实现。这是一个逗号隔开的键/值对(用冒号分割)字符串,键是附着控制器的native DOM事件,值是当事件发生时,你的widget需要执行的方法的名字。如果仅有一个单一的事件需要去控制,忽略最后的逗号。例如,这个是定义在Dijit MenuBarItem里的dojo-data-attach-event属性:

data-dojo-attach-event="onmouseenter:_onHover,onmouseleave:_onUnhover,ondijitclick:_onClick"

 

注意:我们定义在我们例子模板中的事件,ondijitclick,是由Dijit自己设置的一个修饰handler,支持额外的东西,一个普通的onclick事件

不需要捕获。一般来说,你可以在任何你想正常使用onclick的地方使用它

 

当你widget已经实例化,DOM碎片已经从你的模板创建,Dijit模板系统将会贯穿任意的事件定义,自动地从作为结果的DOM和你的widget对象中连接这些事件(用connect)——使得它难以置信的简单去连接你的可视化表现和你的控制代码。另外,当这些事件控制器fired时,一般的,由native DOM事件机制传递的同样的参数将会沿着你的widget控制器传递,因此你有充分的访问报告的权利。

 

关于domNode和srcNode:
在自定义的widget中会用到domNode,其实这个domNode就是整个html模板文件,在dojo中只允许一个顶级节点也就是js文件中最后使用的domNode,类似xml文件中的根节点一样,而srcNode,这个其实是最原始的用来给domNode赋值用的,如果看过dojo的源码就可以看到当domNode被创建成功后,dojo会删掉这个srcNode。
相关文章
|
18天前
|
人工智能 JSON 供应链
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
LucianaiB分享零成本畅用JVS Claw教程(学生认证享7个月使用权),并开源GeoMind项目——将JVS改造为科研与产业地理情报可视化AI助手,支持飞书文档解析、地理编码与腾讯地图可视化,助力产业关系图谱构建。
23529 12
畅用7个月无影 JVS Claw |手把手教你把JVS改造成「科研与产业地理情报可视化大师」
|
5天前
|
Shell API 开发工具
Claude Code 快速上手指南(新手友好版)
AI编程工具卷疯啦!Claude Code凭借任务驱动+终端原生的特性,成了开发者的效率搭子。本文从安装、登录、切换国产模型到常用命令,手把手带新手快速上手,全程避坑,30分钟独立用起来。
1596 10
|
2天前
|
人工智能 开发工具 iOS开发
Claude Code 新手完全上手指南:安装、国产模型配置与常用命令全解
Claude Code 是一款运行在终端环境中的 AI 编程助手,能够直接在命令行中完成代码生成、项目分析、文件修改、命令执行、Git 管理等开发全流程工作。它最大的特点是**任务驱动、终端原生、轻量高效、多模型兼容**,无需图形界面、不依赖 IDE 插件,能够深度融入开发者日常工作流。
1046 1
|
5天前
|
人工智能 JSON BI
DeepSeek V4-Pro 接入 Claude Code 完全实战:体验、测试与关键避坑指南
Claude Code 作为当前主流的 AI 编程辅助工具,凭借强大的代码理解、工程执行与自动化能力深受开发者喜爱,但原生模型的使用成本相对较高。为了在保持能力的同时进一步降低开销,不少开发者开始寻找兼容度高、价格更友好的替代模型。DeepSeek V4 系列的发布带来了新的选择,该系列包含 V4-Pro 与 V4-Flash 两款模型,并提供了与 Anthropic 完全兼容的 API 接口,理论上只需简单修改配置,即可让 Claude Code 无缝切换为 DeepSeek 引擎。
1156 0
|
11天前
|
人工智能 缓存 Shell
Claude Code 全攻略:命令大全 + 实战工作流(完整版)
Claude Code 是一款运行在终端环境下的 AI 编码助手,能够直接在项目目录中理解代码结构、编辑文件、执行命令、执行开发计划,并支持持久化记忆、上下文压缩、后台任务、多模型切换等专业能力。对于日常开发、项目维护、快速重构、代码审查等场景,它可以大幅减少手动操作、提升编码效率。本文从常用命令、界面模式、核心指令、记忆机制、图片处理、进阶工作流等维度完整说明,帮助开发者快速上手并稳定使用。
2717 4
|
2天前
|
人工智能 JSON BI
Claude Code 搭配 DeepSeek V4-Pro 完整测评:超越 Claude Sonnet 4.5,低成本高效能背后的真实表现
Claude Code 凭借强大的代码理解、工程执行与自动化任务能力,成为开发者广泛使用的 AI 编程工具。但原生模型的调用成本较高,长期高频使用会带来明显开销。DeepSeek V4 系列模型发布后,凭借优秀的代码能力与兼容 Anthropic 协议的 API 接口,成为替代原生模型的高性价比选择。本文完整记录将 Claude Code 对接 DeepSeek V4-Pro 的配置流程、真实任务测试效果、优势亮点与必须注意的使用限制,为开发者提供可直接落地的参考方案。
699 1
|
5天前
|
人工智能 Linux API
hermes agent 安装教程:安装优化 + 模型配置 + 工具启用指南
Hermes Agent 是 Nous Research 于 2026 年发布的开源自主进化 AI 智能体框架(MIT 协议,Python 编写)。它通过任务沉淀技能、持久化记忆、原生多工具集成与并行子智能体,实现“越用越强”。支持 Linux/macOS/WSL2,安装便捷,面向个人与企业的新一代私有化 AI 助手。