Cycle.js應用程序未捕獲類型錯誤

我試圖學習Cycle.js，必須說我發現它很有趣。我試圖創建一個簡單的應用程序，我有一個input和一個ul。每次寫入一些值到input，然後按Enter鍵我想添加一個新的li，其值爲ul，但其失敗並出現以下錯誤。Cycle.js應用程序未捕獲類型錯誤

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

來源

2016-02-26 Soham Dasgupta

將程序邏輯放在一邊，view（）需要返回一個Observable，而state.map（...）中的函數也應該返回一些東西。 – juanrpozo

首先，這是很好的看到，人們感興趣的週期！

你在這裏錯過了一些觀點，這就是爲什麼你有一些鬥爭。

您可能還沒有完全理解反應式編程的概念。您應該閱讀Cycle的創作者The introduction to Reactive Programming you've been missing，並觀看his videos about Cycle。他們真的幫助理解Cycle在內部的工作原理。

另外，你可以採用Cycle的命名約定，它確實有幫助。正如@juanrpozo說你的主要問題是在你的view功能，因爲它返回一個虛擬樹，而不是一個可觀察的虛擬樹的流/觀察到應該以$結束，像

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

。此外，重要的是您要明白state變量是可觀察的，而不是JavaScript數組。這就是爲什麼我認爲你還不習慣Rx的原因。你認爲你正在映射一個數組，但實際上你的映射是一個observable，因此返回另一個observable，而不是一個數組。但隨着DOM水槽應該是可觀察到的，這是完美的，你只需要包裝您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上解釋，但如果你讀/看我發給你的資源，你會毫無問題地得到它。

我讓你a jsbin of your code一旦糾正和改變了一點尊重更多的意圖/模型/視圖約定。

您也有其他錯誤，但這些錯誤是最重要的。

來源

2016-02-26 21:50:18 chadrien

輝煌。是的，我仍然在學習Rx，但享受它不會。我知道我應該從'view'函數返回'Observable'，但不知道如何映射'ul'的子元素。我可以問'scan'函數做了什麼？ –

我剛剛運行了你的代碼，它說'values.map'不是一個函數。 –

'掃描'允許你申請一個累加器函數：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/scan.md 在這裏，你必須明白，國家你的組件實際上是一個字符串列表（數組）。什麼定義待辦事項列表？這是要做的事情的清單。這是你的狀態。在你的代碼中，狀態只是一個字符串。因此，要維護和更新該狀態，我們必須做的是累積字符串列表。這就是爲什麼我的意圖是「我添加一個新條目」，模型將這個意圖轉變爲「我將這個新條目添加到現有條目」並且視圖顯示它們 – chadrien

Cycle.js應用程序未捕獲類型錯誤

回答

相關問題