單EmberView做resizable（）和draggable（）

Question

根據問題的回答Ember.js draggable and droppable jqueryUI /本地拖放mixin。

我在EmberJS中實施了JQUERY UI drag, drop, resize mixin。但我的問題是我想要相同的觀點做拖動和調整大小。我試圖以不同的方式實施。您可以檢查此jsfiddle http://jsfiddle.net/codejack/TGwxf/1/該視圖僅獲取最後一次調用的mixin的UI行爲。

是否有任何方式獲得超過1的行爲拖動，放下，調整大小相同的看法？

編輯我發現原因是第二個mixin覆蓋uievents,uiOptions,uiType變量。但仍然不知道如何避免這種情況...只有這樣我才能看到自己的事件編寫自己的小工具...有什麼辦法解決這個問題？

Answer 1

儘管@ user1128571給出了部分解決問題的解決方案，但下面是我如何糾正問題。我爲Interactions添加了不同的mixin，因爲這將解決問題。

https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104

檢查模塊的github pages知道它究竟是如何工作的

Answer 2

您可能希望在JQ.Widget到這個樣子，警告它不漂亮：

這裏，JQ.UiBase是一回事JQ.Widget

JQ.UiBase = Ember.Mixin.create({ 

    uiWidgets: {}, 
    uiAttributes: {}, 

    // ---------------------------------------------------------------------------- 
    // setup and teardown 

    didInsertElement: function(){ 
     this._super(); 
     this._createUiWidgets(); 
    }, 

    willDestroyElement: function(){ 
     this._super(); 
     // implement tear down 
    }, 

    // ---------------------------------------------------------------------------- 
    // @Private 

    // @Function: for each $.ui specified in the view, create a $.ui widget 
    //   add ui widgets to uiWidgets hash, ui widget setting to uiAttributes hash 
    _createUiWidgets: function(){ 
     var widgetTypes = this._gatherWidgetTypes(); 
      uiWidgets  = this.get('uiWidgets'), 
      uiAttributes = this.get('uiAttributes'), 
      thisView  = this; 


     widgetTypes.forEach(function(widget){ 

      var options   = thisView.get(widget + 'Options') || {}, 
       handlers   = thisView._registerEventHandlers(widget), 
       attributes  = $.extend(options, handlers), 
       uiWidget   = $.ui[widget](attributes, thisView.$()); 

      uiWidgets[widget]  = uiWidget; 
      uiAttributes[widget] = attributes; 
     }); 
    }, 

    // @Function: collects named $.ui events from Widget mixin 
    //    for each event, if there is an associated callback, wrap it in a function and call the view's context 
    // @Return: a hash map $.ui event to callback function defined in view 
    _registerEventHandlers: function(widget_name){ 
     var widgetName  = widget_name + 'Events', 
      events   = this.get(widgetName) || [], 
      thisView  = this, 
      eventHandlers = {}; 

     if (events.length === 0) return; 

     // note the iterator is not scoped to the view 
     events.forEach(function(event){ 
      var callBack = thisView.get(event); 
      if (callBack){ 
       eventHandlers[ event ] = function (event, ui){ callBack.call(thisView, event, ui); }; 
      }; 
     }); 
     return eventHandlers; 
    }, 

    // TODO --> find alternate implementation that does not break if structure of ui mixins or namespace change 
    _gatherWidgetTypes: function() { 
     var nameSpace  = 'JQ', 
      widgetTypes = []; 

     Ember.Mixin.mixins(this).forEach(function(mixin){ 
      // find widget with correct namespace 
      if ( mixin.toString().substring(0,2) === nameSpace){ 

       // console.log('gather: ', mixin, ' --> ', mixin.mixins[1]) 
       // access widget mixin and check widget mixin have properties 
       if (mixin.mixins && mixin.mixins[1] && mixin.mixins[1].properties){ 
        if (mixin.mixins[1].properties.widgetType) widgetTypes.push(mixin.mixins[1].properties.widgetType) 
       } 
      } 
     }); 

     return widgetTypes; 
    }, 

}); 

然後您可調整大小的mixin應該是這樣的：

JQ.Resizable = Ember.Mixin.create(JQ.UiBase, { 

    widgetType:  'resizable', 
    resizableOptions: { 'aspectRatio': 1/1 }, 
    resizableEvents: [ 'resize' ], 

    resize: function(event, ui){ 
      // do stuff 

    }, 

}); 

這裏最重要的功能是_gatherWidgetTypes，收集所有JQ-命名空間混入在餘燼對象。在我看來，這是一個黑客攻擊，我最終沒有使用JQ.UiBase之後，有利於混合邏輯來創建小部件，並將事件處理程序和選項指定爲一個mixin，最終看起來更乾淨，但這是隻有我。