Cycle.js獲取按鈕上的輸入值點擊

我正在使用Cycle.js處理待辦事項列表示例應用程序，並且遇到以下問題。我試圖處理添加新的待辦事項項目，當用戶點擊添加按鈕，這工作正常，但另一方面，我有一個提供文本輸入更改事件的流，當與點擊流相結合，它使我的應用程序添加新待辦事項即使在文本輸入被改變的情況下，但添加按鈕沒有被點擊例如集中注意力。這種情況下的方法是什麼？我可以直接消除todoChange $流並直接從addClick $流訪問DOM，否則它會違反Cycle.js哲學？Cycle.js獲取按鈕上的輸入值點擊

JS斌：https://jsbin.com/wugawaheni/edit?js,console,output

const xs = xstream.default; 
const {div, input, p, makeDOMDriver} = CycleDOM; 

const intent = (DOMSource) => { 
    const addClick$ = DOMSource.select('.add').events('click').map(ev => true); 
    const todoChange$ = DOMSource.select('.todo').events('change').map(ev => ev.target.value); 

    return { addClick$, todoChange$ }; 
}; 

const model = (addClick$, todoChange$) => { 
    const add$ = addClick$.startWith(false); 
    const todo$ = todoChange$.startWith(''); 

    return xs.combine(add$, todo$) 
    .map((combined$) => combined$[1]) 
    .fold((todos, todo) => { 
     todo.trim() && todos.push(todo); 
     return todos; 
    }, []); 
}; 

const view = state$ => state$.map(todos => div([ 
    input({attrs: {type: 'text', class: 'todo'}}), 
    input({attrs: {type: 'submit', value: 'Add', class: 'add'}}), 
    div(todos.map(todo => p(todo))) 
])); 


const main = (sources) => { 
    const { addClick$, todoChange$ } = intent(sources.DOM); 
    const state$ = model(addClick$, todoChange$); 
    const vdom$ = view(state$); 

    return { 
    DOM: vdom$ 
    }; 
}; 

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

來源

2017-10-14 ucesco

您也可以使用[解構]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment）並更改： '（combined $）=>合併$ [1]' 至： '（[add，todo]）=> todo' –

包括xstream/extra/sampleCombine，然後...

變化：

//return xs.combine(add$, todo$) 
return add$.compose(sampleCombine(todo$))

從sampleCombine文檔：

Marble diagram: 

--1----2-----3--------4--- (source) 
----a-----b-----c--d------ (other) 
    sampleCombine 

-------2a----3b-------4d--

在這種情況下，add$是source，而todo$是other。僅當other發出一個值時，結果流纔會發出，並且在source發出的值上發出AND。換句話說，只有當source發出時，該流纔會發出，如果other上的值可用於合併。

注意：sampleCombine未包含在默認的xstream庫中。

ESNextbin演示。

來源

2017-10-15 02:46:07 bloodyKnuckles

Cycle.js獲取按鈕上的輸入值點擊

回答

相關問題