3

根据Ember.js draggable and droppable jqueryUI / native Drag and drop mixin 问题的回答。

我已经JQUERY UI drag, drop, resize在EmberJS. 但我的问题是我想要相同的视图来拖动和调整大小。我试图以不同的方式实现。您可以在此 jsfiddle http://jsfiddle.net/codejack/TGwxf/1/中查看该视图仅获取最后调用的 mixin 的 UI 行为。

有什么方法可以在拖放、调整相同视图的大小时获得超过 1 种行为？

编辑我发现原因是第二个 mixin 覆盖了uievents,uiOptions,uiType变量。但仍然不知道如何避免这种情况......我能看到的唯一方法是用自己的事件编写自己的小部件......有什么方法可以解决这个问题？

4

2 回答 2

2

虽然@user1128571 给出了一个部分解决问题的解决方案，但这是我纠正问题的方法。我为 Interactions 添加了不同的 mixin，因为这样可以解决问题。

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

检查模块的github 页面以了解它的工作原理

于 2013-01-09T11:37:47.640 回答
1

您可能希望 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 命名空间的 mixin 收集到 ember 对象中。在我看来，这有点像 hack，我最终没有使用 JQ.UiBase 在制作它之后，倾向于混合逻辑来创建小部件并将事件处理程序和选项指定到一个 mixin 中，最终看起来更干净，但这就是只有我。

于 2013-01-07T18:06:00.330 回答