2

ページの 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 にコピーしたくありません。これは冗長であり、一部の関数には複雑なロジックが含まれているためです。

何か案は？

4

4 に答える 4

0

コードを共有する方法はたくさんありますが、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');
}
于 2012-03-20T13:54:38.950 に答える
0

JavaScript で定義された任意のオブジェクトは、ブラウザのページ内の任意の JavaScript コードからアクセスできます。

同じページに2 つのファイルをロードする場合.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.aandwindows.bの代わりにaandを使用できますb。

関数定義でも同じ例が機能します。

于 2012-01-30T22:13:54.923 に答える
-1

js コードがページごとに異なり、それよりも少ない場合は、インライン js を使用するか、それらのコード行を別のファイルに追加してレイアウト内に含めます (レイアウトが異なるため、同じ js ファイルがどこにでも読み込まれないと仮定します)。 )

于 2012-01-30T22:03:19.797 に答える
-1

プロトタイプを使用して、他のコントローラー関数/イベントにアクセスできます。例えば。この状況では、次のようになります。

$.Controller('Controller.Header', {
  ...
  ".back click": function(){
      if( HISTORY[0] == 'home' )
         Controller.Pagecontent.prototype.loadHome();
  }
  ...
})
于 2012-01-30T23:25:40.160 に答える