Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

backbone.js + global event dispatcher + require.js: how-to?

I have a number of backbone models, organized in collections and connected to their corresponding views and/or collections of views. Some of these models that do not belong to the same collection need to trigger an event which is of interest to another model (and maybe more than one).

The recommended way to deal with this is, I think, the "global event dispatcher/aggregator" as described here and other places.

However, I also happen to be using require.js, which seems to go against the idea of attaching the dispatcher/aggregator to the application's namespace object -- or am I wrong here?

So my question is: using require.js how can I have a number of different backbone models trigger an event that will be handled by another model?

like image 785
alearg Avatar asked Sep 13 '12 07:09

alearg


People also ask

How do I trigger an event in Backbone JS?

js trigger Event is used to invoke or callback the function for the given event or a space-delimited list of events. The subsequent arguments will be passed along to the event callbacks in order to trigger it. Parameter Values: event: It is used to bind an object with an event.

Does backbone need jQuery?

You can use the Backbone. Model without jQuery, but Backbone.

How does Backbone JS work?

Backbone. js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

What are backbone JS events?

Backbone.js Events are the modules that can be mixed in to any object. It facilitates the objects to bind and trigger the custom events by using desired name of our choice. Following is a list of methods that can be used to manipulate the Backbone.js Events: 1. It binds an event to an object and executes the callback whenever an event is fired.

Is Mapbox a backbone JS app?

Note that the gorgeous MapBoxhomepage is also a Backbone.js app. Blossom Blossomis a lightweight project management tool for lean teams. Backbone.js is heavily used in combination with CoffeeScriptto provide a smooth interaction experience. The app is packaged with Brunch.

What is backbone?

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

How do I use jQuery with backbone?

Backbone no longer tries to require jQuery in Node/CommonJS environments, for better compatibility with folks using Browserify. If you'd like to have Backbone use jQuery from Node, assign it like so: Backbone.$ = require('jquery'); Bugfix for route parameters with newlines in them. 1.1.1— Feb. 13, 2014— Diff— Docs


1 Answers

A similar solution to what @Andreas proposed but without Backbone.Marionette (heavily inspired nonetheless, see the article linked in the question).

All you have to do is to define a module that creates a singleton of an event listener and require this object in the modules where you want to trigger an event or listen to this event.

Let's say you have app/channel.js defining your channel

define(['backbone', 'underscore'], function (Backbone, _) {
    var channel = _.extend({}, Backbone.Events); 
    return channel;
});

You can then use it as a listener via

require(['app/channel'], function (channel) {
    channel.on('app.event', function () {
        console.log('app.event');
    });
});

and you can trigger an event on this channel via

require(['app/channel'], function (channel) {
    channel.trigger('app.event');
});
like image 113
nikoshr Avatar answered Sep 29 '22 19:09

nikoshr