4

この＃〜@@！のとき、私はバックボーンを楽しくコーディングして学習していました。起こりました！

ビューをモデルなどから分離するためにrequireを使用します。

バックボーンビューでは、次のイベントを処理します。

define(['...'],function(...) {

var DishView = Backbone.View.extend({
    template: _.template(dish),
    tagName: 'div',
    id: 'dish',

    initialize: function() {
        console.log('initializing dishView');
        this.model.on('change', this.render, this);
    },

    render: function(){
        console.log('rendering dishView');
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        'click #relations-menu .newItem': 'launch_modal_relations',
        'click #delete' : 'delete_dish',
        'click #save-basic-changes': 'save_basic',
        'drop #dropPicture' : 'dropHandler',
        'dragenter #dropPicture' : 'alertMe'
    },

    alertMe: function () {
        console.log('clicked on image');
    },

    delete_dish: function () {
        this.model.deleteMyself();
        Backbone.history.navigate('/', {trigger: true});
    },

    save_basic: function (event) {
        var name = $('#inputName').val();
        var description = $('#inputDescription').val();
        var price = $('#inputPrice').val();
        this.model.updateBasicInfo(name, description, price);
    },

    dropHandler: function(event) {
        event.preventDefault();
        console.log('drop received');
        event.stopPropagation();

        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];
            ...

    },
return DishView;

});

私のドラッグアンドドロップは機能していましたが、さらに多くの機能が追加されると突然機能しなくなりました:(ブラウザで開いた画像ファイル。

DOMの準備ができていることと、これが時々発生する可能性があることを読みました（DOMの準備ができたときにコードが評価された場合）が、クリックイベントは引き続き発生し、dragenterイベントも発生します。

これはタイプミスでしょうか？私は少し頭がおかしくなります私は何が起こっているのか理解できず、戻ってチェックするための良いコミットを思い出せません：S

あなたがいくつかの可能な答えを示すことができればすべてに感謝します:)

例：-ドロップイベントをデバッグするにはどうすればよいですか？-イベントが自分のビューに関連付けられているかどうかをどのように知ることができますか？

4

2 に答える 2

24

あなたは狂っていません。Google Chromeの最近の更新により、NodeCellarチュートリアルを含む、多くのサイトのブラウザへのドロップ機能が機能しなくなりました。ただし、これは非常に簡単に修正できます。dragoverChromeでは、イベントのデフォルトのアクションを防止する必要があります。

$('div').on('drop',function(e){
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    $(this).html('A file was dropped!');
}).on('dragover', function (e) {
  e.preventDefault();
});

このJSFiddleデモは私のために機能します（Chrome24.0.1312.52）。これが、この問題に関するChromiumの問題＃168387です。

そして、NodeCellarでこれを修正するためのプルリクエスト。

于 2013-01-16T00:40:28.213 に答える
2

バックボーンでこのコードを表示に追加できます：

events: {
....
....
    "drop #picture" : "dropHandler",
    "dragover #picture" : "dragOver"
},


dropHandler: function (event) {
    event.stopPropagation();
    event.preventDefault();
....
....
},

dragOver: function (event) {
    event.preventDefault();
}
于 2013-08-27T08:56:19.747 に答える