<html>
<head></head>
<body>
<div id="filter"></div>
</body>
</html>
然后你就像这样包装元素：
var myFilter = new Filter({
elem: document.getElementById('filter'),prop: 'stacks-test',someCallback: function() {
// specify a callback
}
});
和JavaScript(其中spec是传递给构造函数的对象)：
var Filter = function(spec) {
this.elem = spec.elem;
this.prop = spec.prop;
this.callback = spec.someCallback;
this.bindEvents();
};
Filter.prototype.bindEvents = function() {
var self = this;
$(this.elem).click(function(e) {
self.updateFeed();
};
};
Filter.prototype.updateFeed = function() {
this.prop; // 'stacks-test'
this.callback();
// ...
// code to interact with other JavaScript objects
// who in turn,update the document
};
这种方法叫做什么,最佳做法和注意事项是什么？
解决方法
在Dijit中,一个小部件本质上封装了一个DOM节点,它的内容,定义其行为的任何JavaScript,以及(单独导入)CSS来设置其外观的样式.
窗口小部件有自己的生命周期,注册表和事件(包括许多只是映射到窗口小部件节点上的DOM事件的事件,例如myWidget.onClick可以有效地调用myWidget.domNode.onclick).
窗口小部件可以(但不必)在单独的HTML模板文件中定义其初始内容,通过它们还可以将模板内的节点上的事件绑定到窗口小部件方法,以及在窗口小部件上设置引用特定的属性模板中的节点.
我在这里几乎没有抓到表面.如果您想了解更多信息,可以从这些参考页面开始：
> http://dojotoolkit.org/reference-guide/dijit/info.html
> http://dojotoolkit.org/reference-guide/dijit/_Widget.html(所有小部件扩展的基础)
> http://dojotoolkit.org/reference-guide/dijit/_Templated.html(RE的HTML模板)
> http://dojotoolkit.org/reference-guide/quickstart/writingWidgets.html(开始编写自己的小部件时的有用信息)
> http://dojotoolkit.org/reference-guide/dijit/(更多信息)
所有人都说,我不知道你最终的目的是什么,也许这对你的目的来说有点多了(考虑到我要把一个完整的其他图书馆扔给你),但想到它可能至少会激起你的兴趣.
