Using the Observable Template in JavaScript

Question

function Observer() { this.fns = []; } Observer.prototype = { subscribe : function(fn) { this.fns.push(fn); }, unsubscribe : function(fn) { this.fns = this.fns.filter( function(el) { if ( el !== fn ) { return el; } } ); }, fire : function(o, thisObj) { var scope = thisObj || window; this.fns.forEach( function(el) { el.call(scope, o); } ); } }; var fn = function() {}; var o = new Observer; o.subscribe(fn); o.fire('here is my data'); o.unsubscribe(fn); 

I can not understand the whole concept of this. I want to implement this template in my project. I have a view where the form is submitted and it calls WebService and returns me the answer.

If I need to implement this in my project, where is a simple request and response ... how do I work with it? I understand that you are notifying your observer when there are changes ... let me make a request to my API and I will return the answer ... now I want him to receive a notification about my viewing through the observed template

Answer 1

The observer is represented by the constructor that you invoke with var o = new Observer(); and then o will be an object with a link to a bunch of functions. you add functions to the list through subscribe . and remove them from the list via unsubscribe

then the whole point of everything is the fire method, which will cycle through the list of functions, and then call each of the functions one by one. "observer pattern" seems to be very similar to a singleton pattern

Are you familiar with the watch method in JavaScript? its method is supported through Firefox, which you can use on any object.

 document.myform.myfield.watch('value', function (v) { alert(v); return v; }) 

then whenever the value of an object changes, the watch function is called. so basically the concept of the observer pattern is that you want to basically mimic the method of viewing Firefox in a cross browser.

you throw a link to a bunch of functions or objects in the list.then subscription have Observer.fire callback method call for each of the observed objects or functions. if the user performs some action, such as a click, then the entire list of functions will be updated through the callback function

Hope this helps.

Answer 2

If you want to make a simple query, then in jQuery (for example, $.ajax(...) or $.get(...) ), which will look like this:

 var requestUrl = "text.html"; // Callback is defined here var viewCallback = function(data) { // this will be called when the request is done console.log('view is notified'); console.log('data looks like this:'); console.log(data); // you could chain method calls to other callbacks here if you'd like }; // Request is done here $.ajax({ url: requestUrl, }).done(viewCallback); 

In most cases, you only want to do one thing by executing a query for which above all the code is enough. Using javascript libraries like jQuery or mootools abstracts weirdness with the XMLHttpRequest object.

However, if you want to do something much more advanced, I would recommend that you look at libraries that do things like Radio.js .