Question

在让我的视图更新drop事件时遇到一些麻烦。我很确定问题出在函数handleDrop（）中。重新呈现视图已在浏览器中进行正常的model.set（{}）测试。所以，我知道这不是问题所在......

Backbone路由器

App.Routers.Dashboard = Backbone.Router.extend({

routes: {
    "": "index"     
},

initialize: function(options) {

    },

index: function() {

var preflist = new App.Models.PrefList({});

preflist.fetch({
    success: function() {
      var paneloneview = new App.Views.PanelOne({ model: preflist });
      $('#panelone').html(paneloneview.render().$el);
    }  
});

var sourceID;
var payloads = {
poolpricedraggable: "poolprice",
nonedraggable: "smp"
};

var element = function(id) { return document.getElementById(id); }

function handleDragOver(event) {
if(event.preventDefault) event.preventDefault();
return false;
}
function handleDrop(event) {
    dropzone = this.id;
    if(event.preventDefault) event.preventDefault();
    console.log("recevied the data: " + payloads[sourceID] + " in #" + dropzone);
    var attribute = preflist.get('panel_one');
    preflist.set({panel_one: attribute});
    preflist.save();
}  

element('panelone').addEventListener('dragover', handleDragOver, false);            
element('panelone').addEventListener('drop', handleDrop, false);

PanelOne视图

App.Views.PanelOne = Backbone.View.extend({

initialize: function() {                
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
},

render: function(){
    var panelonesetting = this.model.get('panel_one');
    this.$el.html(JST['dashboard/' + panelonesetting]({}));
return this;
}

});

最诚挚的问候， AC

Answer 1

我在这里可以看到的一个问题是，您正在尝试使用与自身相同的值来设置模型的值 - 当您用自身替换值并且模型中的更改未被检测到时，基本上会被忽略 - 因此，不会调用render方法。

您可能希望使用模型上的trigger方法自行手动调用模型上的渲染或触发更改事件。（如果您提供的代码之外还有其他任何内容 - 因为我在这里看到的内容无论如何都不会改变？）

您是否忘记使用拖动对象中的信息来更改模型的设置？

Answer 2

上面我的问题中的代码是在深夜写的。现在，我已经惊醒地看到汤姆和穆指出了我犯下的这个令人尴尬的错误（这感觉类似于醉酒的拨号事件）。尽管如此，这里是经过纠正的代码，所有这些对于任何想要包含一些拖放功能来设置模型属性的骨干应用程序都应该很方便：

    function handleDrop(event) {
       //  This dropzone var isn't used for anything here but may be useful for others. So, I've left it in...
       dropzone = this.id;
       // This preventDefault is necessary to prevent actions some older browsers like to do on drop events
       if(event.preventDefault) event.preventDefault();
       //  This model attribute should be set to the payload listed above
   preflist.set({ panel_one: payloads[sourceID] });
   preflist.save();
        }

Backbone.js使用/ HTML5拖放查看Drop的更新;下降

2 个答案: