Question

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

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 时，我没有引用＆＃34;这个＆＃34; 。。通常＆＃34;此＆＃34; 将是视图本身。

而＆＃34;此＆＃34; 指的是树视图对象。我在drop处理程序中看到了event对象，但没有引用该视图。

我尝试使用BackBone.Events扩展树视图，但这会导致我失去拖放功能。我还尝试将视图对象作为参数传递给drop处理程序，但是它替换了onDrop函数中的event参数。

Answer 1

下划线的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);
   }
}

要了解详情，请参阅_.bind

以下示例示例在下划线网站上发布了

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);

此处回调函数this中的buttonView.onClick正确指向buttonView，而不指向绑定的DOM元素（通常）。

Answer 2

我对骨干或牵线木偶知之甚少，但似乎你可以使用你创建的ItemView变量：

View.myPanel.saveItem(localModel, false);

<强>更新

您是否尝试过将View对象作为局部变量传递并返回ItemView对象的自执行函数：

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);

Answer 3

Kendo 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");
}

如何从kendo ui treeview事件处理程序引用骨干视图？

3 个答案: