5

オブザーバブルが機能する方法と、マウントされたタグから参照を取得する方法を正しく理解しているかどうかはよくわかりません。コンポーネントがあります。このコンポーネント内には、componentとcomponentがあります。目的は、コンポーネント間の結合を避けることです。そのため、検索が完了したとき (ボタンがクリックされたとき) に検索コンポーネントがイベントをトリガーするようにしたいと考えています。このイベントは、検索に基づいてコレクション データをフィルタリングするコンポーネントによってキャッチされる必要があります。

index.html ファイルは、次を使用してタグをロードします。

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);
}

そのイベントをコンポーネントに監視させるにはどうすればよいですか?

page.jsのsearch タグとcollection タグから参照を取得できるはずです。そうすることで、次のようにイベントを接続できます。

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

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

今、私はそれをそのように機能させることはできません。

実行時点では、searchComponent と collectionComponent は定義されていません。

これらのコンポーネントをマウントする代わりにthis.searchTagandthis.collectionTagを使用して参照を取得しようとしましたが、コードの実行時にコンポーネントがマウントされていないため、それらへの参照を取得できません。

それを機能させるためのアイデアはありますか？

4

5 に答える 5

14

共有オブザーバブルを両方のタグに渡すようにしてください。

var sharedObservable = riot.observable();

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

そして、タグで、それを使用してください：

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

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

編集: またはさらに良いことに、searchタグcollectionは別の riot タグ ( page) の子タグであるため (したがって、手動でマウントする必要もありません)、親を共有オブザーバブルとして使用できます。したがって、次のように子タグでイベントをトリガーまたは処理するだけです。

this.parent.trigger('myEvent');

this.parent.on('myEvent', function() { ... });
于 2015-08-19T13:20:17.760 に答える
14

@gius からの回答に触発されて、これは、RiotJS でイベントをあるタグから別のタグに送信するための私の推奨方法になりました。

@gius アプローチとの違いは、ネストされたタグを多数使用する場合、共有 Observable を各タグに渡すのが不十分であるということです。これは、各子タグに何度も渡す必要があるため (または子タグから呼び出す必要があるため)乱雑な this.parent 呼び出しで)。

この (以下) のように Observable を定義する単純な Mixin を定義することは、必要なタグでそれを共有できることを意味します。

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

この行をタグに追加します..

this.mixin(SharedMixin);

そして今、上記の行を含むタグは、次のようなイベントを発生させることができます..

this.observable.trigger('event_of_mine');

..またはこのようなイベントを受け取ります..

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

ここで私の作業中のjsfiddleを参照してくださいhttp://jsfiddle.net/3b32yqb1/5/。

于 2015-08-24T11:12:33.633 に答える