RiotJS - How to pass events between subtags using Observable pattern?

二次信任 提交于 2019-11-30 10:06:14

Firstly I do not understand your file structure !

In your place I would change filenames :

page.js --> page.tag

search.js --> search.tag

And i dont see your search tag in search.js code.


So I dont see your Collection tag file ...

Are you sure that this one use this code ? riot.observable({self|this}); Because it's him who will receive an Event.

For me when I use Riot.js(2.2.2) in my browser, if I use searchComponent = riot.mount('search'); searchComponent will be undefined

But with this code you can save your monted tag reference :

var searchComponent ={};
riot.compile(function() {
    searchComponent = riot.mount('search')[0];
});
John Leach

Inspired by the answer given by @gius, this is now my preferred method for sending events in RiotJS from one tag to another.. and it is great to work with!

The difference from @gius approach being that, if you use a lot of nested tags, passing a shared Observable to each tag falls short, because you would need to pass it again and again to each child tag (or call up from the child tags with messy this.parent calls).

Defining a simple Mixin, like this (below), that simply defines an Observable, means that you can now share that in any tag you want.

var SharedMixin = {
observable: riot.observable()
};

Add this line to your tags..

this.mixin(SharedMixin);

And now, any tag that contains the above line can fire events like..

this.observable.trigger('event_of_mine');

..or receive events like this..

this.observable.on('event_of_mine',doSomeStuff());

See my working jsfiddle here http://jsfiddle.net/3b32yqb1/5/ .

gius

Try to pass a shared observable to both tags.

var sharedObservable = riot.observable();

riot.mount('search', {observable: sharedObservable}); // the second argument will be used as opts
riot.mount('collection', {observable: sharedObservable});

And then in the tags, just use it:

this.opts.observable.trigger('myEvent');

this.opts.observable.on('myEvent', function() { ... });

EDIT: Or even better, since your search and collection tags are child tags of another riot tag (page) (and thus you also don't need to mount them manually), you can use the parent as the shared observable. So just trigger or handle events in your child tags like this:

this.parent.trigger('myEvent');

this.parent.on('myEvent', function() { ... });

Another option is to use global observables, which is probably not always best practice. We use Riot's built in conditionals to mount tags when certain conditions are met rather than directly mounting them via JS. This means tags are independent of each other.

For example, a single observable could be used to manage all communication. This isn't a useful example on its own, it's just to demonstrate a technique.

For example, in a plain JS file such as main.js:

var myApp = riot.observable();

One tag file may trigger an update.

var self = this;
message = self.message;
myApp.trigger('NewMessage', message);

Any number of other tag files can listen for an update:

myApp.on('NewMessage', function(message) {
  // Do something with the new message "message"
  console.log('Message received: ' + message);
});

Maybe overkill but simple. let riot self observable

riot.observable(riot);

So you can use

riot.on('someEvent', () => {
  // doing something
});

in a tag, and

riot.trigger('someEvent');

in another.

It's not good to use global variable, but use an already exists one maybe acceptable.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!