将装饰器转换为 DOJO 中的自定义小部件？

Question

我想知道是否可以在自定义小部件（基于 dijit/form/Select）中转换我的 decorator 函数以应用猴子补丁。

或者您知道替代解决方案吗？

require([
  'dijit/form/Select',
  'dojo/_base/window',
  'dojo/domReady!'
], function(Select, win) {
  var decorator = function(select) {
    select.on('change', function(value) {
      alert(value);
    });

    select.dropDown._onUpArrow = function() {
      this.focusPrev()
    }.bind(select.dropDown);

    select.dropDown._onDownArrow = function() {
      this.focusNext()
    }.bind(select.dropDown);

    select.dropDown.focusNext = function() {
      var focusNext = function() {
        var next = this._getNextFocusableChild(this.focusedChild, 1);
        this.focusChild(next);
        if (next.option.group) {
          focusNext();
        }
      }.bind(this);
      focusNext();
    }.bind(select.dropDown);

    select.dropDown.focusPrev = function() {
      var focusPrev = function() {
        var prev = this._getNextFocusableChild(this.focusedChild, -1);
        this.focusChild(prev);
        if (prev.option.group) {
          focusPrev();
        }
      }.bind(this);
      focusPrev();
    }.bind(select.dropDown);

    select.dropDown.onItemHover = function(item) {
      if (item.option.group) {
        item._set('hovering', false);
        return;
      }

      if (this.activated) {
        this.set('selected', item);
        if (item.popup && !item.disabled && !this.hover_timer) {
          this.hover_timer = this.defer(function() {
            this._openItemPopup(item);
          }, this.popupDelay);
        }
      } else if (this.passivePopupDelay < Infinity) {
        if (this.passive_hover_timer) {
          this.passive_hover_timer.remove();
        }
        this.passive_hover_timer = this.defer(function() {
          this.onItemClick(item, {
            type: 'click'
          });
        }, this.passivePopupDelay);
      }

      this._hoveredChild = item;

      item._set('hovering', true);
    }.bind(select.dropDown);

    select.dropDown._onItemFocus = function(item) {
      if (item.option.group) {
        return;
      }
      if (this._hoveredChild && this._hoveredChild != item) {
        this.onItemUnhover(this._hoveredChild);
      }
      this.set('selected', item);
    }.bind(select.dropDown);
  };

  var select = new Select({
    name: 'select2',
    options: [{
        label: '<i>Colors I love</i>',
        value: 'G 1',
        group: true,
        disabled: true
      },
      {
        label: 'Red',
        value: '1'
      },
      {
        label: 'Green',
        value: '2',
        selected: true
      },
      {
        label: 'Yello',
        value: '3'
      },
      {
        label: 'Purple',
        value: '4'
      },
      {
        label: '<i>Food I love</</i>',
        value: 'G 2',
        group: true,
        disabled: true
      },
      {
        label: 'Red tomatoes',
        value: '1'
      },
      {
        label: 'Green apples',
        value: '3'
      }
    ]
  }, 'select');

  decorator(select);

});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js">
</script>

<body class="claro">
  <div id="select"></div>
</body>

代码取自此；

Answer 1

如果你想在你的项目中创建一个自定义表单 select js 小部件，没有那个装饰器，

为了可重用性创建 JS 文件（通过示例 app/path/MyCustomSelect.js），（确保配置 dojo 以找到创建的文件请参阅 documentation 中的此处），导入资源后（AMD 使用 define ）创建小部件并使用 declare class 继承 select ，

在此阶段，您必须验证 postCreate（小部件基本生命周期方法，这是在实例化之后和渲染之前执行的），然后添加装饰器代码（通过将 select 替换为当前范围 this ) ,

为什么要用postcreate，因为widget是实例化的，所有其他引用的资源都是创建的，所以你可以访问this.dropDown 属性，这在构造方法中是不可能的，见上文link 以便更好地了解小部件生命周期阶段。

在您的应用程序中使用小部件后，使用 require("location_to_your_jsile") 并在回调中使用它的引用，

因此 MyCustomSelect.js 文件应该如下所示：

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

  return declare(Select, {
    postCreate: function() {
      //make sur call this , like call super() ; inherited code will be executed 
      this.inherited(arguments);

      console.log(this.dropDown);
      this.dropDown._onUpArrow = function() {
        this.focusPrev()
      }.bind(this.dropDown);

      this.dropDown._onDownArrow = function() {
        this.focusNext()
      }.bind(this.dropDown);

      this.dropDown.focusNext = function() {
        var focusNext = function() {
            var next = this._getNextFocusableChild(this.focusedChild, 1);
            this.focusChild(next);
            if (next.option.group) {
              focusNext();
            }
        }.bind(this);
        focusNext();
      }.bind(this.dropDown);

      this.dropDown.focusPrev = function() {
        var focusPrev = function() {
          var prev = this._getNextFocusableChild(this.focusedChild, -1);
          this.focusChild(prev);
          if (prev.option.group) {
            focusPrev();
          }
        }.bind(this);
        focusPrev();
      }.bind(this.dropDown);

      this.dropDown.onItemHover = function(item) {
        if (item.option.group) {
          item._set('hovering', false);
          return;
        }

        if (this.activated) {
          this.set('selected', item);
          if (item.popup && !item.disabled && !this.hover_timer) {
            this.hover_timer = this.defer(function() {
              this._openItemPopup(item);
            }, this.popupDelay);
          }
        } else if (this.passivePopupDelay < Infinity) {
          if (this.passive_hover_timer) {
            this.passive_hover_timer.remove();
          }
          this.passive_hover_timer = this.defer(function() {
            this.onItemClick(item, {
              type: 'click'
            });
          }, this.passivePopupDelay);
        }

        this._hoveredChild = item;

        item._set('hovering', true);
      }.bind(this.dropDown);

      this.dropDown._onItemFocus = function(item) {
        if (item.option.group) {
          return;
        }
        if (this._hoveredChild && this._hoveredChild != item) {
          this.onItemUnhover(this._hoveredChild);
        }
        this.set('selected', item);
      }.bind(this.dropDown);
    }
  });
});

如果你想要一个实时样本（不使用单独的文件），请参阅下面的代码片段:)。

require([
  "dojo/_base/declare",
  'dijit/form/Select',
  'dojo/_base/window',
  'dojo/domReady!'
], function(declare, Select, win) {

  var SelectGroup = declare(Select, {
    postCreate: function() {
      //make sur call this , like call super() ; inherited code will be executed 
      this.inherited(arguments);
      
      console.log(this.dropDown);
      this.dropDown._onUpArrow = function() {
        this.focusPrev()
      }.bind(this.dropDown);
     
      this.dropDown._onDownArrow = function() {
        this.focusNext()
      }.bind(this.dropDown);
      
      this.dropDown.focusNext = function() {
        var focusNext = function() {
            var next = this._getNextFocusableChild(this.focusedChild, 1);
            this.focusChild(next);
            if (next.option.group) {
              focusNext();
            }
        }.bind(this);
        focusNext();
      }.bind(this.dropDown);
      
      this.dropDown.focusPrev = function() {
        var focusPrev = function() {
          var prev = this._getNextFocusableChild(this.focusedChild, -1);
          this.focusChild(prev);
          if (prev.option.group) {
            focusPrev();
          }
        }.bind(this);
        focusPrev();
      }.bind(this.dropDown);
      
      this.dropDown.onItemHover = function(item) {
        if (item.option.group) {
          item._set('hovering', false);
          return;
        }

        if (this.activated) {
          this.set('selected', item);
          if (item.popup && !item.disabled && !this.hover_timer) {
            this.hover_timer = this.defer(function() {
              this._openItemPopup(item);
            }, this.popupDelay);
          }
        } else if (this.passivePopupDelay < Infinity) {
          if (this.passive_hover_timer) {
            this.passive_hover_timer.remove();
          }
          this.passive_hover_timer = this.defer(function() {
            this.onItemClick(item, {
              type: 'click'
            });
          }, this.passivePopupDelay);
        }

        this._hoveredChild = item;

        item._set('hovering', true);
      }.bind(this.dropDown);
      
      this.dropDown._onItemFocus = function(item) {
        if (item.option.group) {
          return;
        }
        if (this._hoveredChild && this._hoveredChild != item) {
          this.onItemUnhover(this._hoveredChild);
        }
        this.set('selected', item);
      }.bind(this.dropDown);
    }
  });
  

  var select = new SelectGroup({
    name: 'select2',
    options: [{
        label: '<i>Colors I love</i>',
        value: 'G 1',
        group: true,
        disabled: true
      },
      {
        label: 'Red',
        value: '1'
      },
      {
        label: 'Green',
        value: '2',
        selected: true
      },
      {
        label: 'Yello',
        value: '3'
      },
      {
        label: 'Purple',
        value: '4'
      },
      {
        label: '<i>Food I love</</i>',
        value: 'G 2',
        group: true,
        disabled: true
      },
      {
        label: 'Red tomatoes',
        value: '1'
      },
      {
        label: 'Green apples',
        value: '3'
      }
    ]
  }, 'select');

  //decorator(select);

});

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<body class="claro">
  <div id="select"></div>
</body>

将装饰器转换为 DOJO 中的自定义小部件？

Convert decorator to custom widget in DOJO?

javascript

dojo

dijit.form