标签: cyclejs

我不熟悉反应式编程和使用cycle.js玩弄,尝试实现本教程中关注框的人.但我明白,为了正确实现(和学习目的),我没有一个数据:完整的用户名.我可以通过顺序获取用户,然后从服务器获取完整的用户数据来获得它.在命令式的风格我会做这样的事情:

fetch(`https://api.github.com/users`)
  .then(data => data.json())
  .then(users => fetch(users[0].url))
  .then(data => data.json())
  .then(/* ... work with data ... */)

但是我该怎么做呢？我正在使用fetch驱动程序并尝试这样的事情:

function main({ DOM, HTTP }) {
  const users = `https://api.github.com/users`;

  const refresh$ = DOM.select(`.refresh`).events(`click`)

  const response$ = getJSON({ key: `users` }, HTTP)

  const userUrl$ = response$
    .map(users => ({
      url: R.prop(`url`, R.head(users)),
      key: `user`,
    }))
    .startWith(null)

  const request$ = refresh$
    .startWith(`initial`)
    .map(_ => ({
      url: `${users}?since=${random(500)}`,
      key: `users`,
    }))
    .merge(userUrl$)

  const dom$ = ...

  return {
    DOM: dom$,
    HTTP: …

我想使用Foundation的reveal插件在Cycle.js应用程序中显示一个很好的模态.

在玩了几个小时的Webpack和它的配置后,我想出了如何将基础的js导入我的(es6)应用程序.

但是,由于我正在处理虚拟dom,当基础的js初始化时,实际的html不存在.

这是我的组件代码:

import Rx from 'rx';
import {div} from '@cycle/dom';

import $ from 'jquery';
import {foundation} from 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.keyboard';
import 'foundation-sites/js/foundation.util.box';
import 'foundation-sites/js/foundation.util.triggers';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.util.motion';
import 'foundation-sites/js/foundation.reveal';

require('./styles/configuration-modal.scss');

function ConfigurationModal(sources) {

    const values$ = sources.props$;

    const vtree$ = Rx.Observable.just(1).map(() => {
        return div(
            '#config-modal.reveal',
            {attributes: {
                'data-reveal': ''
            }},
            ['hello']
        );
    });

    return {
        DOM: vtree$,
        values$
    };
}

$(function() {
    $.fn.foundation = foundation;
    $(document).foundation();
});

export default ConfigurationModal;

我的main.js:

import Rx from 'rx';
import …

如何使用Cycle聚焦输入？我是否需要进入DOM内部并.focus()使用或不使用jQuery 调用,或者是否有其他方式使用Cycle/RxJS？

我已经阅读了关于Cycle.js的官方文档和其他文档.我看到的唯一一点是它将主逻辑及其对DOM的影响分开.

给出的例子非常简短,就像构建BMI计算器一样.我不明白如何在Cycle.js上开发一个大应用程序,我不明白如何将一个大应用程序的所有代码分别放入main()并将其DOM效果通道化.

如何编写循环代码以生成大型应用程序？

我一直在尝试创建一些cycle.js示例作为嵌套对话框,并使用选择框在它们之间切换.

其中一个对话是官方Github HTTP搜索示例的克隆.

另一个对话是一个更基本的对话,没有HTTP,只有DOM.

我觉得我绕着2号换了我的头,但我对Rx来说相当新,所以可能做得不正确或天真.

在我向搜索页面添加加载指示器之前,这一切似乎都运行良好.

为此,我转过身来:

  const vTree$ = responses.HTTP
    .filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
    .flatMapLatest(x => x)
    .map(res => res.body.items)
    .startWith([])
    .map(results =>
      h('div.wrapper', {}, [
        h('label.label', {}, 'Search:'),
        h('input.field', {type: 'text'}),
        h('hr'),
        h('section.search-results', {}, results.map(resultView)),
      ])
    )

进入:

  const searchResponse$ = responses.HTTP
    .filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
    .flatMapLatest(x => x)
    .map(res => res.body.items)
    .startWith([])

  const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))

  // Convert the stream of HTTP responses to virtual DOM elements.
  const vtree$ = loading$.withLatestFrom(searchResponse$, (loading, results) =>
      h('div.wrapper', …

我想知道是否有cycle.js,motorcycle.js,most.js和snabbdom的tsd定义.

如何使用cyclejs对文档加载的Web服务发出http请求？这些示例涵盖了对用户输入的反应,不符合我的需求.

我正在尝试学习 cyclejs 和反应式编程，但我不知道如何使用值管理事件。

例如，我需要创建四个函数来进行一些数学运算，例如：

• 添加
• 减法
• 分区
• 乘法

这是我拥有的代码：

function main ({DOM}) {

  const secondNumber$ = DOM
    .select('.second-number')
    .events('change')
    .map(ev => ev.target.value)
    .startWith(0)

  const firstNumber$ = DOM
    .select('.first-number')
    .events('change')
    .map(ev => ev.target.value)
    .startWith(0)

  const addClick$ = DOM
    .select('.add')
    .events('click')
    .merge(firstNumber$)
    .merge(secondNumber$)
    .filter(value => console.log(value))
    .scan((nb1, nb2) => nb1 + nb2)


  return {
    DOM: addClick$.map(result =>
      div([
        input('.first-number',{type:'text'}),
        input('.second-number',{type:'text'}),
        button('.add', 'Add'),
        h2('Result is : ' + result)
      ])
    )
  };
}

它根本不起作用，我无法弄清楚我在那里做错了什么。

我正在寻找一个简单的解释，我怎样才能使它起作用？我觉得 secondNumber$ 和 firstNumber$ 的合并流不正确，我找不到原因..

任何的想法 ？

编辑：我知道我不应该使用我正在使用的运算符，而是使用 withLatestFrom。 …

我正在使用存储和状态插件开发Cycle JS应用。

该应用程序使用xstream作为反应库。

我陷入了一种奇怪的行为。

我的流就是这个图

在第一个会话var更新中，我得到了以下调试结果：

• 调试0
• 调试1
• 调试3

问题：未执行“调试2”分支

如果我更新会话项（以便产生新的存储事件），则两个分支均按预期执行

• 调试0
• 调试1
• 调试2
• 调试3

如果在“ debug 0”处添加.remember（），也会发生相同的良好行为。

• 调试0
• 调试1
• 调试2
• 调试3

更陌生的是，如果我移除过滤器，流程将按预期工作

没有过滤器（并且不记得），流程从第一个事件开始就给出此结果

• 调试0
• 调试1
• 调试2
• 调试3

我的怀疑是在连接第二个分支之前在“调试0”处观察到某种情况，因此第一个事件已被使用。但是，如果两个分支xs.merged在一起怎么办？如何执行一个分支而不执行第二个分支？这两个分支没有过滤器或其他处理，它们合并映射到化简函数。关于如何调试和解决这种情况的任何建议？

使用Cycle.js,我正在尝试创建一个视图,在给定一组数据点时呈现动态数量的组件.但是,我无法弄清楚如何创建重复的视图.

我已经把所有内容都删回了我认为应该如何工作的最基本的例子.希望有人可以指出我所缺少的东西.

/*
    Expected:
    Given an array of data objects, create the following DOM
    <div class="container">
        <h1 class=".data">Element 1</h1>
        <h1 class=".data">Element 2</h1>
        <h1 class=".data">Element 3</h1>
        <h1 class=".data">Element 4</h1>
        ...
    </div>

    Result:
    <div class="container">
        <h1 class=".data">Element 9</h1>
    </div>
*/

function view( data$ ){
    return Rx.Observable.of(
        div('.container', data$.map( data =>
            h1('.data', `Element: ${ data.id }`)
        ))
    );
}

function main( sources ) {

    // Create an array of objects
    const arr = [];
    for( let i = 0; i < …

只是尝试愚蠢的东西和玩Cycle.js.并遇到问题.基本上我只有一个按钮.当您单击它时,它会将该位置导航到随机散列并显示它.几乎像一个没有预定义路由的愚蠢路由器.IE浏览器.路线是动态的.再次,这不是任何实际的我只是搞乱一些东西,并试图学习Cycle.js.但点击"添加"按钮后,下面的代码崩溃了.但是位置已更新.如果我实际上只是导航到"#/ asdf",它会显示正确的内容"Hash:#/ asdf".不确定为什么流崩溃并出现错误:

render-dom.js:242 TypeError:无法读取未定义的属性'subscribe'(...)

import Rx from 'rx';
import Cycle from '@cycle/core';
import { div, p, button, makeDOMDriver } from '@cycle/dom';
import { createHashHistory } from 'history';
import ranomdstring from 'randomstring';

const history = createHashHistory({ queryKey: false });

function CreateButton({ DOM }) {
  const create$ = DOM.select('.create-button').events('click')
    .map(() => {
      return ranomdstring.generate(10);
    }).startWith(null);

  const vtree$ = create$.map(rs => rs ?
    history.push(`/${rs}`) :
    button('.create-button .btn .btn-default', 'Add')
  );

  return { DOM: vtree$ };
}

function main(sources) {
  const hash = …