RiotJS-如何使用可观察模式在子标签之间传递事件? [英] RiotJS - How to pass events between subtags using Observable pattern?

问题描述

我不确定我是否正确理解了可观察对象的工作方式以及如何从装入的标签中获取引用.我有一个组件.在此组件中，我们有一个组件和一个组件.目的是避免组件之间的耦合.因此，我希望我的搜索组件在完成搜索后(点击一个按钮)触发一个事件.该事件应由组件捕获，该组件将根据搜索结果过滤收集数据.

Im not really sure if Im understanding correctly the way observables work and how to get references from mounted tags. I have a component. Within this component we have a component and a component. The purpose is to avoid coupling between components. Because of that, I would like that my search component triggers an event when a search is done(a button is clicked). This event should be caught by the component which will filter the collection data based on the search.

index.html文件使用以下方式加载标记:

The index.html file load the tag by using:

index.html

riot.mount(".content", "page", null);

页面定义如下:

page.js

<page>
    <!-- Search tag controls -->
    <search id="searchTag"></search>

    <!-- Collection data to display -->
    <collection id="collectionTag"></collection>
</page>

组件脚本的定义如下:

search.js

var self = this;
riot.observable(self);

<!-- This function is called when the user click on the button. -->
self.filtering = function()
{
    <!-- We get data from inputs -->
    var info = Getting data from inputs;

    <!-- Trigger the event hoping that someone will observe it -->
    self.trigger("filterEvent", info);
}

如何使组件对该事件进行观察?

How can I make the component observe for that event?

在我看来，我应该能够从 page.js 中的搜索标签和收藏标签获取引用.这样，我可以像下面这样连接事件:

To me it seems that I should be able to get references from search tag and collection tag in the page.js. By doing so I could connect the events like follow:

searchComponent = riot.mount('search');
collectionComponent = riot.mount('collection');

searchComponent.on('filterEvent', function()
{
   <!-- Trigger function to filter collection data -->
    collectionComponent.trigger('filterData');
});

现在我无法使其正常工作.

在执行时，未定义 searchComponent和collectionComponent .

我也尝试通过使用this.searchTag和this.collectionTag来获取这些组件的引用，而不是安装它们，但是在执行代码时，这些组件尚未安装，所以我没有得到他们的参考.

I tried also getting references of these component by using this.searchTag and this.collectionTag instead of mounting them but at the time the code is executed, the components have not been mounted and so I dont get a reference to them.

有什么想法可以使它起作用吗?

Any ideas to make it work?

推荐答案

首先，我不了解您的文件结构！

Firstly I do not understand your file structure !

在您的位置，我将更改文件名:

In your place I would change filenames :

page.js-> page.tag

page.js --> page.tag

search.js-> search.tag

search.js --> search.tag

而且我在search.js代码中看不到您的搜索标签.

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

所以我看不到您的收藏标签文件...

So I dont see your Collection tag file ...

您确定此人使用此代码吗? riot.observable({self|this}); 因为是他将收到一个事件.

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

对于我来说，当我在浏览器中使用Riot.js(2.2.2)时 searchComponent = riot.mount('search'); searchComponent将是未定义的

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

但是使用此代码，您可以保存monted标签参考:

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

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

这篇关于RiotJS-如何使用可观察模式在子标签之间传递事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！