如何访问不同控制器的功能？ - JavaScript MVC答案

【问题标题】：How to access the function of different controller? - JavaScript MVC如何访问不同控制器的功能？ - JavaScript MVC
【发布时间】：2012-02-22 16:20:55
【问题描述】：

假设我有 2 个控制器来处理页面的 2 个部分 - 标题和页面内容。大多数操作发生在 pagecontent.js（页面内容的控制器）中。它具有一组加载各种视图的功能。但标题有后退按钮。我跟踪历史记录，当单击后退按钮时，我想调用 pagecontent.js 上的相应函数来加载特定视图。这是我正在尝试做的示例：

pagecontent.js

$.Controller('Controller.Pagecontent', {
  ...
  ".home click": function(){
      this.loadHome();
  },
  loadHome: function(){
      $('#pagecontent').html('//views/home', {});
  }
  ...
})

header.js

$.Controller('Controller.Header', {
  ...
  ".back click": function(){
      if( HISTORY[0] == 'home' )
          // call loadHome() from pagecontent.js
  }
  ...
})

我不想将所有这些函数都复制到 header.js 中，因为这将是多余的，并且某些函数具有复杂的逻辑。

有什么想法吗？

【问题讨论】：

标签： javascript jquery model-view-controller jquery-events javascriptmvc

【解决方案1】：

任何在 javascript 中定义的对象都可以从浏览器页面中的任何 javascript 代码访问。

如果您在同一页面中加载两个.js 文件，尽管在一个不同的部分中的对象可能在另一个中可以访问，因此可以在window 对象中定义这些文件。

file1.js

var a = 13;
var b = 14;

file2.js

alert("a="+a);

function show_b() {
    alert("b="+b);
}

如果 file2.js 在 file1.js 之后加载，将显示带有 'a=13' 的警报。每当您在加载两个文件之前调用show_b() 时，都会显示带有“b=14”的那个。

为避免干扰，您可以使用windows.a 和windows.b 而不是a 和b。

同样的例子也适用于函数定义。

【讨论】：

不幸的是，这不起作用，因为我正在使用控制器： $.Controller('Controller.Header', { ... functions ... } );我无法通过从另一个控制器调用它来访问该函数。

【解决方案2】：

有很多方法可以共享代码，但 JavaScriptMVC 中的惯用方式是这样的：

".back click": function(){
  if( HISTORY[0] == 'home' )
     $('#pageContent').controller().loadHome();
}

其中#pageContent 是您最初用于创建控制器的选择器。

使用自定义事件会更好。如果 pageContent 是 header 的父级，则可以使用 jQuery.trigger：

// PageContent

"home.clicked": function() {
   this.loadHome();
}

// Header

".back click": function() {
  this.element.trigger('home.clicked');
}

或者您可以使用 OpenAjax 事件：

// PageContent

"home.clicked subscribe": function() {
   this.loadHome();
}

// Header

".back click": function() {
  OpenAjax.hub.publish('home.clicked');
}

【讨论】：

【解决方案3】：

如果每个页面的 js 代码会有所不同，并且如果它更少，则使用内联 js 或将这些代码行添加到单独的文件中并将其包含在布局中（假设您有不同的布局，因此相同的 js 文件不是到处加载）

【讨论】：

【解决方案4】：

您可以使用原型访问其他控制器功能/事件。例如。在这种情况下，它会是这样的：

$.Controller('Controller.Header', {
  ...
  ".back click": function(){
      if( HISTORY[0] == 'home' )
         Controller.Pagecontent.prototype.loadHome();
  }
  ...
})

【讨论】：