

# 実現したいこと

JavaScriptのフレームワークにBackbone.jsを使ってページ間でのイベントの発火と監視を行う方法を知りたいです。もしくは可能ですか？

イメージとしては、page2.htmlに配置されたボタンを押すとpage1.htmlのdiv要素を書き換えるようなイメージです。これをブラウザを2つ立ち上げ、それぞれpage1.htmlとpage2.htmlを表示させた状態で実施したいです。

page2.html(myView2)のbuttonをクリックするとイベントがtriggerし、page1.html(myView1)のListenToでイベントをキャッチして表示を切り替えるという流れです。  
common.jsにはmyView1/2で共有できるイベントのオブジェクトを各Viewの生成時に引数として与えています。

# 実現できていること

同一ページでは解説サイトがあり、動作させることが出来ました。  
page2.html(myView2)でトリガーしたイベントは、自身のpage2.htmlのlistenToで捕捉できているため、コンソールが表示されています。※これは当たり前ですね

common.js

[code]

    // 監視用イベントの作成
    var mediator = _.extend({}, Backbone.Events);
    
    var myView1 = Backbone.View.extend({
      option: {},
      initialize: function(attr, option) {
        this.option = option;
        this.listenTo(option.mediator, 'OccurEvent', this.display);
    
      },
      display: function() {
        console.log("OccurEvent");
        this.$el.html("<p>Event Occurred</p>");
      }
    });
    
    var myView2 = Backbone.View.extend({
      option: {},
      initialize: function(attr, option) {
        this.option = option;
        this.listenTo(option.mediator, 'OccurEvent', this.display);
      },
      display: function() {
        console.log("Event occurred");
      },
      events: {
        "click >": "occurEvent"
      },
      occurEvent: function() {
        this.option.mediator.trigger('OccurEvent');
      }
    });
    
[/code]

page1.html

[code]

    <省略>
      <script src="./js/common.js"></script>
      <div id="getEvent"></div>
      <script>
        $(function() {
          new myView1({
            el: "#getEvent"
          }, {
            mediator: mediator
          });
          // Objectが同じものを指しているのか？結果はTrue
          console.log("Object equals:"+Object.is(myView1.option,myView2.option));
    
        });
    </script>
    <省略>
    
[/code]

page2.html

[code]

    <省略>
      <div id="OccurEvent">
        <button>OccurEvents</button>
      </div>
    
    
    <script>
        $(function() {
    
          new myView2({
            el: "#OccurEvent"
          }, {
            mediator: mediator
          });
    
          console.log("Object equals:" + Object.is(myView1.option, myView2.option));
        });
    </script>
    <省略>
    
[/code]


CC BY-SA 3.0
2017-12-28T04:31:16.337
40576
2019-07-19T12:59:59.017
24811
question
javascript backbone.js
複数ページ間のイベントの発火と監視について


Backbone.jsかどうかに関わらずサーバ側に相応の仕組みを実装しないと実現できません。

２つのWebページを開いたままの状態で片方のページのイベントを通知するなら  
\- Server-Sent Events  
\- WebSocket  
\- ロングポーリング  
のいずれかの仕組みをサーバ側に組み込む必要があります。


CC BY-SA 4.0
2017-12-29T13:15:46.467
40607
2019-07-19T12:59:59.017
2019-07-19T12:59:59.017
4388
4388
40576
answer


Backbone.jsを使ったことがないので、一般的な回答をします。  
解決策としては、遷移先ページに「ボタンが押された」ことを伝えればいいわけなので、以下のいずれかの方法で実現できる

・ボタンが押されたら、クッキーに値を与え、遷移先ページで参照する  
・ページ遷移時のURLに、任意のパラメータを渡し、遷移先ページで参照する  
・WebStorageを使う  
・phpにする


CC BY-SA 3.0
2018-01-03T18:46:01.167
40703
2018-01-03T18:46:01.167
20267
40576
answer