【问题标题】:CycleJS - subscribing click events of a child componentCycleJS - 订阅子组件的点击事件
【发布时间】:2016-03-16 20:31:21
【问题描述】:

我是 CycleJS 的新手,我想从父组件订阅子组件的“点击”事件;但是,它不起作用。我可以在子组件中订阅事件。是否可以从父组件订阅子组件的事件?如果可能,我该怎么做?这是父组件:

import Rx from 'rx';
import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';
import isolate from '@cycle/isolate';
import _ from 'underscore';
import Inboxmails from './../components/inboxmails';

const {div} = CycleDOM;    
const Main =  (sources) => {

        const inboxmails=Inboxmails({DOM: sources.DOM});

        sources.DOM.select('#inbox_1')
                .events('click')
                .do(event => event.preventDefault())
                .subscribe(event => {
                    console.log(event);
                });


        const vtree$ = Rx.Observable.of(
                    div('.wrapper', [
                            inboxmails.DOM
                        ]));

            return {
                DOM: vtree$
            };
        };



    export default (sources) => isolate(Main)(sources);

这是子组件

import Rx from 'rx';
import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';
import isolate from '@cycle/isolate';
const { div} = CycleDOM;

const Inboxmails = function (sources) {
    const inboxmails$ = Rx.Observable.of(div([
        div("#inbox_1",[
            "Click here"
        ])])
    );
    return {
        DOM: inboxmails$    
    };
};

export default (sources) => isolate(Inboxmails)(sources);

【问题讨论】:

    标签: reactive-programming cyclejs


    【解决方案1】:

    让孩子返回父母需要的事件接收器。

    const Inboxmails = function (sources) {
        const inboxmails$ = Rx.Observable.of(div([
            div("#inbox_1",[
                "Click here"
            ])])
        );
        return {
            DOM: inboxmails$,
            clicks: sources.DOM.select('#inbox_1').events('click')  
        };
    };
    

    那么家长可以使用inboxmails.clicks

    但是,在 Cycle.js 中,您的代码中不应该有任何订阅(除非它用于调试)。订阅调用只能在驱动程序中。

    【讨论】:

      猜你喜欢
      • 2021-12-20
      • 1970-01-01
      • 2016-08-14
      • 1970-01-01
      • 2023-04-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多