Using pubsub for communication in wirejs?

[Hendrik Jan van Meerveld]

Hello,

I am trying to find a good way to let components in wire.js communicate with each other.

Pubsub is new for me but feels like the most appropriate solution.

Ideally the components should not be aware of all the channels that are used in the application (only their own channel).

(that feels like good practice).

Currently I have two components:

define({ // Wire spec

  imageGrid: {

    create: {

      module: 'modules/horizontalDgrid/module',

      args: {

        node:  {$ref: 'id!all-images'},

        store: {$ref: 'imageStore'},

        field: 'id',

        label: 'description',

        query: {},

        render: { module: 'modules/horizontalDgrid/renderers/Image' }

      }

    }

  },

  imagePartSelect: {

    wire: {

      spec: 'app/admin/editor/imagePartSelect.spec',

      provide: {

        node: {$ref: 'id!filtered-imageparts'},

        store: {$ref: 'imagePartStore'},

        label: 'couch_id'

      }

    }

  }

});

This is a kind of chained-select setup.

The options that are shown in the 'imagePartSelect' component (a 'dijit/form/Select' widget) depend on the option that is chosen in the 'imageGrid'.

I would like to do something like this:

define({ // Wire spec

  pubsubChannel: {
    create: /* some code to create a channel object */
  },

  imageGrid: {

    create: {

      module: 'modules/horizontalDgrid/module',

      args: {
        channel: {$ref: 'pubsubChannel'}, // a channel to send the selected image id to

        node:  {$ref: 'id!all-images'},

        store: {$ref: 'imageStore'},

        field: 'id',

        label: 'description',

        query: {},

        render: { module: 'modules/horizontalDgrid/renderers/Image' }

      }

    }

  },

  imagePartSelect: {

    wire: {

      spec: 'app/admin/editor/imagePartSelect.spec',

      provide: {
        channel: {$ref: 'pubsubChannel'}, // a channel object to attach a handler to

        node: {$ref: 'id!filtered-imageparts'},

        store: {$ref: 'imagePartStore'},

        label: 'couch_id'

      }

    }

  }

});

Now what I am wondering is this:

• does this look like a good-practice setup (can you make channel-objects)?
• what is a good module to use? I've seen 'dojo/topic', 'wire/dojo/pubsub' and 'msgs.js' and I just don't know which to choose...

Thanks for any help or a pointer to a tutorial or documentation,

Kind regards,

Hendrik Jan

[Scott Andrews]

Hi Hendrik,

You already noticed msgs.js, which I'm partial to. You may not have noticed that it has a plugin for wire.js on the dev branch.

https://github.com/cujojs/msgs/blob/dev/wire.js

I haven't written reference docs yet, sorry, but the test suite should give you an indication how it's expected to be used.

https://github.com/cujojs/msgs/blob/dev/test/wire-test.js

If you run into any questions, please just reply here.

-Scott

--
You received this message because you are subscribed to the Google Groups "cujojs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cujojs+un...@googlegroups.com.
To post to this group, send email to cuj...@googlegroups.com.
Visit this group at http://groups.google.com/group/cujojs.
To view this discussion on the web visit https://groups.google.com/d/msgid/cujojs/8e39bcf6-c4f6-451d-8dd0-27892cebcaa3%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Hendrik Jan van Meerveld]

Hi Scott,

That looks like an interesting read; and a useful plugin.

I'll have a closer look soon.

Kind regards,

Hendrik Jan

[eschwartz]

I put together a little facet plugin to use along with Backbone.Events. Besides binding events, it also allows you transform event parameters before passing them off to the listener. Here's the plugin in a gist.

Example:

           // Transformer

           define('loudspeaker', function() {

             return function(talker, words) {

               return words.toUpperCase();

             }

           });

         

           wire({

             loudspeaker: { module: 'loudspeaker' },

             talker: { create: 'talker' },

             listener: {

               create: 'listener',

               listenTo: {

                 talker: {

                   whisper: 'loudspeaker | listen'

                 }

               }

             }

           });

         

           talker.trigger('whisper', talker, 'hello there');

           // listener.listen called with: 'HELLO THERE'

[Brian Cavalier]

Pretty cool, eschwartz!  Thanks for posting the link.