javascript - Cycle.js 应用程序未捕获的类型错误

Question

我正在尝试学习 Cycle.js 并且必须说我发现它非常有趣。我正在尝试创建一个简单的应用程序，其中我有一个 input 和一个 ul。每次向 input 写入一些值并按下 enter 我想添加一个新的 li 并将值添加到 ul，但它失败了出现以下错误。

Uncaught TypeError: observables[_name2].doOnError is not a function

var view = function (state) {
    return CycleDOM.body([
        CycleDOM.input({ type: 'text', value: '' }),
        CycleDOM.ul({ className: 'text' },
            state.map(function (value) {
                CycleDOM.li({ innerText: value });
            }))
    ]);
};

var intent = function (DOM) {
    return DOM.select('input[type=text]').events('keydown').filter(function (ev) {
        return ev.which == 13 && ev.target.value.trim().length > 0;
    }).map(function (ev) {
        return ev.target.value;
    });
};

var model = function (action) {
    return action.startWith('');
};

var main = function (sources) {
    var actions = intent(sources.DOM);
    var state = model(actions);
    var sinks = {
        DOM: view(state)
    };
    return sinks;
}

var drivers = {
    DOM: CycleDOM.makeDOMDriver(document.body)
};

Cycle.run(main, drivers);

Answer 1

首先，很高兴看到人们对 Cycle 感兴趣!

您在这里遗漏了一些要点，这就是您遇到困难的原因。

您可能还没有完全理解响应式编程的概念。你应该阅读 The introduction to Reactive Programming you've been missing由 Cycle and watch 的创造者 his videos about Cycle .它们确实有助于了解 Cycle 的内部工作原理。

此外，您可以采用 Cycle 的命名约定，这确实很有帮助。 stream/observable 应该以 $ 结束，比如

var click$ = DOM.select('a').events('click');

正如@juanrpozo 所说，您的主要问题出在您的view 函数中，因为它返回一个虚拟树而不是虚拟树的可观察对象。 同样重要的是，您了解 state 变量是可观察的，而不是 javascript 数组。这就是为什么我认为您对 Rx 还不满意。您认为您正在映射一个数组，但实际上您映射的是一个可观察对象，因此返回另一个可观察对象，而不是一个数组。 但由于 DOM 接收器应该是可观察的，这很完美，您只需将 VTree 包装在 map 中:

var view = function (state$) {
    return state$.map(function (values) {
        CycleDOM.body([
            CycleDOM.input({ type: 'text', value: '' }),
            CycleDOM.ul({ className: 'text' }, values.map(function (value) {
                CycleDOM.li(value);
            }))
        ])
    };
}

另一个问题是您的state$ 管理。您必须了解 state$ 是组件的连续状态流。在 stackoverflow 上很难对此进行解释，但如果您阅读/观看我发送给您的资源，您将毫无问题地理解它。

我造就了你a jsbin of your code一旦更正并稍作更改以更加尊重 Intent/Model/View 约定。

您还有其他错误，但这些是最重要的。