Question

尝试愚蠢的东西并玩弄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 = location.hash;
  const DOM = sources.DOM;

  const vtree$ = hash ?
    Rx.Observable.of(
      div([
        p(`Hash: ${hash}`)
      ])
    ) :
    CreateButton({ DOM }).DOM;

  return {
    DOM: vtree$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container')
});

感谢您的帮助

Answer 1

我会进一步建议使用@cycle / history来改变你的路线（仅显示相关部分）

import {makeHistoryDriver} from '@cycle/history'
import {createHashHistory} from 'history'

function main(sources) {
  ...
  return {history: Rx.Observable.just('/some/route') } // a stream of urls
}

const history = createHashHistory({ queryKey: false })
Cycle.run(main, {
  DOM: makeDOMDriver('#main-container'),
  history: makeHistoryDriver(history),
})

Answer 2

在您的功能CreateButton上，您将点击次数映射到history.push()，而不是将其映射到导致错误的vtree：

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

相反，你可以使用do运算符来执行hashchange：

function CreateButton({ DOM }) {
  const create$ = 
    ...
    .do(history.push(`/${rs}`)); // <-- here

  const vtree$ = Observable.of(
    button('.create-button .btn .btn-default', 'Add')
  );
  ...
}

然而，在函数式编程中，您不应对app逻辑执行副作用，每个函数都必须保持pure。相反，所有副作用应由驾驶员处理。要了解详情，请查看drivers section on Cycle's documentation

要查看正在工作的驱动程序，请在邮件末尾跳转。

此外，在您的main函数中，您没有使用流来渲染您的vtree。它不会对locationHash更改产生反应，因为vtree$ = hash ? ... : ...仅在app bootstrapping上评估一次（当主函数被评估时，＆＃34; wire＆＃34;每个流一起）。

改进将是在保持相同逻辑的同时将main的vtree $声明为：

const vtree$ = hash$.map((hash) => hash ? ... : ...)

这是一个带有小型locationHash驱动程序的完整解决方案：

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


function makeLocationHashDriver (params) {
  const history = createHashHistory(params);

  return (routeChange$) => {
    routeChange$
      .filter(hash => {
        const currentHash = location.hash.replace(/^#?\//g, '')
        return hash && hash !== currentHash
      })
      .subscribe(hash => history.push(`/${hash}`));

    return Rx.Observable.fromEvent(window, 'hashchange')
      .startWith({})
      .map(_ => location.hash);
  }
}

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

  const vtree$ = Rx.Observable.of(
    button('.create-button .btn .btn-default', 'Add')
  );

  return { DOM: vtree$, routeChange$: create$ };
}

function main({ DOM, hash }) {
  const button = CreateButton({ DOM })
  const vtree$ = hash.map(hash => hash
    ? Rx.Observable.of(
        div([
          p(`Hash: ${hash}`)
        ])
      )
    : button.DOM
  )

  return {
    DOM: vtree$,
    hash: button.routeChange$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container'),
  hash: makeLocationHashDriver({ queryKey: false })
});

PS：你的randomstring函数名中有一个拼写错误，我在我的例子中修正了它。

简单历史记录崩溃

2 个答案: