如何从自身调用布局以创建实例

Question

我有一个 Layout(SubMenu100

(，它有一个调用其他 Layout(SubMenu200( 的事件，但它也制作了一个 onClick 触发器，如果 layout(SubMenu100( 将创建一个实例并调用自己，但我不知道如何获取像下一个代码这样的实例。

this.SubMenu100 = new SubMenu100();

我尝试将其放入定义变量中，但出现错误。

define([
    'backbone.marionette',
    'underscore',
    'logger',
    'tpl!apps/templates/SubMenu100.html',
    'i18n!apps/nls/Messages',
    'apps/views/SubMenu200',
    'apps/views/SubMenu100'
], function (Marionette, _, Logger, Template, i18n, SubMenu200, SubMenu100) {
    launch: function (e) {
        $("#title_wrapper_div").click(this.callMe);
    },
    callMe: function () {            
        if (this.subMenu100 === undefined) {
            this.subMenu100 = new SubMenu100(); // <- here
        }
        window.App.vent.trigger("dashboard:showView",this.subMenu100, "", "", "", "");
    }
}

所以，这就是一个问题，如何在自身内部创建SubMenu100的实例？

Answer 1

如果在 SubMenu100 的上下文中调用launch，你可以做this.callMe.bind(this)那么你应该能够在callMe里面做new this()。

但为简单起见，您可以这样做：

define([
    'backbone.marionette',
    'underscore',
    'logger',
    'tpl!apps/templates/SubMenu100.html',
    'i18n!apps/nls/Messages',
    'apps/views/SubMenu200'
  ], function(Marionette, _, Logger, Template, i18n, SubMenu200) {
  var SubMenu100 = Class SubMenu100 {
    launch: function(e) {
      $("#title_wrapper_div").click(this.callMe);
    },
    callMe: function() {
      if (this.subMenu100 === undefined) {
        this.subMenu100 = new SubMenu100();
      }
      window.App.vent.trigger("dashboard:showView", this.subMenu100, "", "", "", "");
    }
  }
  return SubMenu100;
});

请注意，每个launch都会在同一元素上创建新的事件处理程序(除非其他内容正在执行适当的清理(，这可能会导致错误。我不建议在主干组件中使用全局jQuery选择器。

如果你想创建SubMenu100和SubMenu200的实例，我会创建一个更高级别的组件来负责它：

require([
// ^ ------ this is NOT SubMenu100 definition
'apps/views/SubMenu100',
'apps/views/SubMenu200',
], function (SubMenu100, SubMenu200) {
  // this is NOT SubMenu100 definition
  launch: function (e) {
    $("#title_wrapper_div").click(this.callMe);
  },
  callMe: function () {            
    if (this.subMenu100 === undefined) {
        this.subMenu100 = new SubMenu100();
    }
  }
});