Dojo：如何增强 dijit？

Question

是否可以通过编程方式将特定行为绑定到 dijit？

即假设我在整个项目中经常使用这个 dijit/form/NumberSpinner。现在我想在所有 NumberSpinners 上都有一个 onFocus: function() { console.log('hi') }。

通常我会这样做：

          … new NumberSpinner({
                onFocus: function() { console.log('hi'); },
                …
            });

在每个元素上。没有办法将此绑定为每个 NumberSpinner 实例的默认行为吗？？

谢谢

Answer 1

我终于找到了如何做到这一点。

使用扩展

像这样：

lang.extend(NumberSpinner, {
    _onFocus: function() { console.log('hi'); }
});

JSBIN 上的工作示例：https://jsbin.com/sesotolove/2/edit?html,output

参考：https://dojotoolkit.org/reference-guide/1.7/dojo/extend.html

使用原型

同样可以通过像这样覆盖原型来实现：

NumberSpinner.prototype._onFocus: function() { console.log('hi'); }

Answer 2

一个选项是创建您自己的自定义组件，从 NumberSpinner 和 overwrite/add 扩展您想要的所有功能和属性。

示例：

app/CustomNumberSpinner.js

define([
  'dojo/_base/declare', 
  'dijit/form/NumberSpinner'
], function(
  declare,
  NumberSpinner
) {

  // The declare and the references passed in the array on the next line defines what you are extending
  return declare([NumberSpinner], {

    /* Add all functions/props that you want in this object */

    onFocus: function() {
      console.log('Hi, this is a onFocus event being handled');
    }      

  });

});

编写自定义组件后，您只需在要使用它的地方导入模块并实例化它，就像您使用默认 NumberSpinner 一样，但是您不需要传递 props/functions 你需要在构造函数参数中）。

Dojo：如何增强 dijit？

Dojo: how to enhance a dijit?

javascript

dojo

dijit.form

使用扩展

使用原型