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

Posted 2021-05-05

我有一个布局（SubMenu100）有一个事件来调用其他布局（SubMenu200），但它也会创建一个onClick触发器，如果​​布局（SubMenu100）并调用自身将创建一个实例，但我不知道如何获得实例就像下一个代码。

this.SubMenu100 = new SubMenu100();

我试着把它放在Define vars中，但是给我一个错误。

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实例？

答案

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

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

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