如何访问不同控制器的功能?-JavaScript MVC

How to access the function of different controller? - JavaScript MVC

本文关键字：控制器 功能 MVC -JavaScript 何访问 访问      更新时间：2023-09-26

假设我有两个控制器，它们处理页眉和页面内容的两部分。大多数操作都发生在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中定义的任何对象都可以从浏览器页面中的任何javascript代码中访问。

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

file1.js

var a = 13;
var b = 14;

file2.js

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

如果在file1.js之后加载file2.js，则会显示"a=13"的警报。在加载两个文件之前，每当调用show_b()时，都会显示"b=14"的警告。

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

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

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

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

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

更好的做法是使用自定义事件。如果pageContent是标头的父级，则可以使用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');
}

如果js代码每页都不一样，如果更少，那么就使用内联js或将这些代码行添加到单独的文件中，并将其包含在布局中（假设您有不同的布局，所以不会到处加载相同的js文件）

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

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