2017-06-07 7 views
1

猿パッチを適用するために私のdecorator関数をカスタムウィジェット(dijit/form/Selectに基づいて)に変換することが可能かどうかを知りたいと思います。DOJOのデコレータをカスタムウィジェットに変換しますか?

または代替ソリューションをご存知ですか?このanswerから採取

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>

コード。再利用のために

答えて

2

あなたはそのデコレータなしで、あなたのプロジェクトでjsのウィジェットを選択し、カスタムフォームを作成したい場合は、

(例app/path/MyCustomSelect.jsによる)JSファイルを作成し、(作成したファイルを見つけるために、あなたの道場を設定することを確認してください あなたがpostCreate(ウィジェットベースlifcycle方法をovverideする必要があり、この段階では、(AMDはあなたがウィジェットを作成し、宣言クラスを使用して選択を継承)を定義使用してリソースをインポートした後、)ここdocumentation

を参照してください、これはありますインスタンス化の後、レンダリングの前に実行されます)、次にデコレータコードを追加します(現在のスコープthisによって)、

のPostCreateを使用して、なぜ、ウィジェットがインスタンス化され、他のすべての参照ressouceが作成されているので、あなたは、コンストラクタメソッドでは不可能であるthis.dropDownプロパティにアクセスすることができ、ために上記のリンクを参照してくださいbeacauseウィジェットライフサイクルの段階をよりよく理解する。 (「location_to_your_jsile」)を必要と使用して、アプリで使用ウィジェットをした後

、およびコールバックでそのrefernceを使用し、

ので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); 
    } 
    }); 
}); 

ライブサンプルが必要です(separteファイルを使用せずに)下記のスニペットを参照してください:)。

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>

関連する問題