27

ここでレンダリングし、jqueryuiでドラッグできるようにするバックボーンビューモデルがあります。 

render: ->
$(this.el).attr('class', 'item').html(this.template(this.options.model.toJSON() ))
viewmodel = this
$(this.el).draggable
    revert: true
    drag: () ->
        console.log(viewmodel)

上記では、viewmodelを利用でき、domから削除したり、モデルのメソッドを呼び出したりできます。しかし、必要なのは、このビューモデルをドロップ可能なコンテナ（ゴミ箱など）にドラッグしてから、ビューモデルのメソッドを作成し、DOMから削除します。

ただし、アイテムがコンテナにドロップされたときのコールバックメソッドは次のようになります。

$(function() {
    $("#trash").droppable({
        drop: function(event, ui) {
          console.log(ui.draggable);
        }
    });
});

したがって、ui.draggableを表示してDOMから削除することはできますが、そのビューモデルへの参照はありません。私は何か間違ったことをしていますか？これを回避する方法はありますか？

4

4 に答える 4

41

私は同じ問題に遭遇したと思います。メタデータを要素に追加したり、グローバルに保存したりする代わりに、実際のビュー自体への参照をDOM要素に保存しました。これにより、モデルとそこから必要な情報にアクセスできます。

window.MyDraggableView = Backbone.View.extend({
    initialize: function(){
        $(this.el).draggable();
        $(this.el).data("backbone-view", this);
    }
});

window.MyDropTarget = Backbone.View.extend({
    initialize: function(){
        $(this.el).droppable({
            drop: function(ev, ui){
                // get reference to dropped view's model
                var model = $(ui.draggable).data("backbone-view").model;
            },
        });
    },
});
于 2011-10-12T15:29:33.650 に答える
18

私はこの問題を抱えています。私はこうしてそれを解決しました：ドロップターゲットにモデルコレクションへの参照を与えます。data-cid="<%= cid %>"ドラッグ可能なオブジェクトにプロパティを設定します。これで、からコレクション内のモデルを検索できます$(ui.draggable).data('cid')。バックボーンはCIDが一意であると主張しているため、ゴミ箱に入れたいモデルクラスが複数ある場合は、コレクションのコレクションをスキャンすることもできます。

于 2011-09-07T03:00:08.020 に答える
11

私が使用するアプローチは、カスタムイベントを介してドロップ可能からドラッグ可能にイベントを渡すことです。

var DroppableView = Backbone.View.extend({
  events: { 'drop': 'dropHandler' },
  initialize: function() { this.$el.droppable(); },
  dropHandler: function(e, ui) { ui.draggable.trigger('drop:dropview'); }
})

var DraggableView = Backbone.View.extend({
  events: { 'drop:dropview': 'dropviewDropHandler'},
  initialize: function(){ this.$el.draggable(); },
  dropviewDropHandler: function() { this.doSomething(); }
});

これにより、ドラッグされたビューのコンテキストでドロップハンドラーを実行できます。これは、ドロップ可能なビューのコンテキストで実行するよりも便利なことがよくあります。

于 2012-05-11T19:36:22.947 に答える
1

この問題は、ドラッグと呼ばれる、アプリの名前空間に配置されるグローバルプロパティで解決しました。

一度にドラッグされるビューは1つだけなので、ドラッグするビューはドラッグイベントにバインドされ、独自のモデルをwindow.draggingに書き込みます。

ドロップ可能なビューにドロップされると、そのビューはそのドラッグ変数を介して現在のドラッグモデルを取得します。

ところで、そのプロパティは、ウィンドウに直接追加するのではなく、グローバルにアクセス可能なアプリケーションの名前空間内に配置する方が適切です。これは、アプリケーションのApp.View.toolでした。

このような：

dragging = null;

draggableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("dragStart",
        function() {
            window.dragging = this.model;
        },
        this);

        //remove reference for garbage collection purpose
        $(this.el).bind("dragStop",
        function() {
            delete window.dragging;
        },
        this);
    },

});

droppableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("drop",
        function() {
            var draggedmodel = window.dragging;
            delete window.dragging;
            // for garbage collection purpose
            //do funky stuff
            alert("You dropped " + draggedmodel.get('title') + " on " + this.el.get('title'));
            //...
        },
        this);
    },
});
于 2011-09-20T12:05:18.733 に答える