Understanding the Ignition and Monitoring of Multi-Page Events

Asked 1 years ago, Updated 1 years ago, 34 views

I would like to know how to use Backbone.js in JavaScript framework to ignite and monitor events between pages.Or is it possible?

The image is like rewriting the div element of page1.html by pressing the button placed on page2.html.I would like to launch two browsers and display page1.html and page2.html respectively.

If you click the button on page2.html(myView2) the event triggers, and the flow is to catch the event on page1.html(myView1) ListenTo and switch the display.
Common.js gives objects for events that can be shared in myView 1/2 as arguments when each View is generated.

On the same page, there was an explanation site, and I was able to make it work.
The event triggered by page2.html (myView 2) is captured by listenTo in its own page2.html, so the console is displayed.これThis is obvious

common.js

//Creating Events for Monitoring
varmediator=_.extend({}, Backbone.Events);

varmyView1 = 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>");
  }
});

varmyView2 = 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');
  }
});

page1.html

<omitted>
  <script src="./js/common.js"></script>
  <divid="getEvent"></div>
  <script>
    $(function(){
      new myView1({
        el: "#getEvent"
      }, {
        mediator: mediator
      });
      // Does Object refer to the same thing?Result is True
      console.log("Object equals:" + Object.is(myView1.option, myView2.option));

    });
</script>
<Omitted>

page2.html

<omitted>
  <divid="OccurEvent">
    <button>OccurEvents</button>
  </div>


<script>
    $(function(){

      new myView2({
        el: "#OccurEvent"
      }, {
        mediator: mediator
      });

      console.log("Object equals:" + Object.is(myView1.option, myView2.option));
    });
</script>
<Omitted>

javascript backbone.js

2022-09-29 22:26

2 Answers

I have never used Backbone.js, so I will give you a general answer.
The solution is to tell the transition destination page that the button has been pressed, so you can do it in one of the following ways

·When the button is pressed, give a value to the cookie and refer to it on the transition destination page
·Give arbitrary parameters to the URL at the time of page transition and refer to the transition destination page
·Use WebStorage
·Make it php


2022-09-29 22:26

Whether it's Backbone.js or not, you have to implement the appropriate mechanism on the server side.

If you want to keep two web pages open and notify events on one page,
- Server-Sent Events
- WebSocket
- US>Long Polling
One of the mechanisms in must be incorporated on the server side.


2022-09-29 22:26

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.