1

我正在努力学习Cycle.js，并且必须说我发现它很有趣。我正在尝试创建一个简单的应用程序，其中我有一个input和一个ul. 每次向 the 写入一些值input并按 Enter 键时，我都想向 中添加一个li带有该值的新值ul，但它失败并出现以下错误。

未捕获的 TypeError：observables[_name2].doOnError 不是函数

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

1 回答 1

2

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

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

您可能还没有完全理解反应式编程的概念。您应该阅读Cycle 的创建者所缺少的 The Introduction to Reactive Programming，并观看他关于 Cycle 的视频。它们确实有助于了解 Cycle 如何在内部工作。

此外，您可以采用 Cycle 的命名约定，它确实很有帮助。流/observable 应该以 结尾$，例如

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

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

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 上解释这一点有点困难，但如果你阅读/观看我发给你的资源，你会毫无问题地得到它。

一旦更正并更改了一点以更多地尊重 Intent/Model/View 约定，我就为您制作了代码的 jsbin 。

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

于 2016-02-26T21:50:18.877 回答