Backbone.js 如何从kendo ui treeview事件处理程序引用主干视图？

我正在使用带有Backbone.js和Marionette.js的Kendo UI treeview。treeview位于视图组件内，在一个区域运行良好。首先，我在调用view render方法时初始化treeview

View.myPanel = Marionette.ItemView.extend(
    render: function () {
            this.treeview = this.$el.find("#treeview").kendoTreeView({
            dataSource: this.hierarchicalDataSource,
                  dataTextField: ["item"],
                  dragAndDrop: true,
                  loadOnDemand: false,
                 drop: this.onDrop
            }).data("kendoTreeView"),
             this.treeview.expand(".k-item");
    },  

      onDrop: function (e) {
            ...
            code to create model goes here ......
           ... 
            this.saveItem(localModel, false);
   }
} 

我的问题是，当我尝试调用this.saveItem时，我没有引用“this”。通常“这”是视图本身

相反，“this”指的是treeview对象。我在drop处理程序中看到事件对象，但没有对视图的引用

---

我试图用主干.Events扩展treeview，但这会导致我失去拖放功能。我还尝试将view对象作为参数传递给drop处理程序，但这将替换onDrop函数中的事件参数。

我对主干网或木偶网知之甚少，但似乎可以使用您创建的

ItemView

变量：

View.myPanel.saveItem(localModel, false);

更新

您是否尝试过将

视图

对象作为局部变量传入并返回

项目视图

对象的自执行函数：

View.myPanel = (function(view) {
    return Marionette.ItemView.extend(
        render: function () {
            this.treeview = this.$el.find("#treeview").kendoTreeView({
                dataSource: this.hierarchicalDataSource,
                dataTextField: ["item"],
                dragAndDrop: true,
                loadOnDemand: false,
                drop: this.onDrop
            }).data("kendoTreeView"),
            this.treeview.expand(".k-item");
        },  

        onDrop: function (e) {
            ...
            code to create model goes here ......
            ... 
            view.myPanel.saveItem(localModel, false);
        }
    );
})(View);

---

剑道UI显式地将事件处理程序的上下文设置为触发事件的小部件；使用闭包保持对视图的访问：

render: function () {
    var that = this;
    this.treeview = this.$el.find("#treeview").kendoTreeView({
        dataSource: this.hierarchicalDataSource,
        dataTextField: ["item"],
        dragAndDrop: true,
        loadOnDemand: false,
        drop: function (e) {
            that.onDrop(e)
        }
    }).data("kendoTreeView"),
    this.treeview.expand(".k-item");
}

---

下划线的

bind

和

bindAll

方法可能会帮助您

View.myPanel = Marionette.ItemView.extend(
    initialize: function() {
        _.bindAll(this,'onDrop');
    },
    render: function () {
            this.treeview = this.$el.find("#treeview").kendoTreeView({
            dataSource: this.hierarchicalDataSource,
                  dataTextField: ["item"],
                  dragAndDrop: true,
                  loadOnDemand: false,
                 drop: this.onDrop
            }).data("kendoTreeView"),
             this.treeview.expand(".k-item");
    },  

      onDrop: function (e) {
            ...
            code to create model goes here ......
           ... 
            this.saveItem(localModel, false);
   }
} 

要了解更多信息，请参阅

下面是在网站上发布的示例

var buttonView = {
  label  : 'underscore',
  onClick: function(){ alert('clicked: ' + this.label); },
  onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);

---

这里是回调函数

buttonView中的
this
。onClick

正确指向

buttonView

而不是绑定的DOM元素（这是常见的）。

视图在onDrop函数中不可用。有任何答案有帮助吗？