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获取按钮上的输入值点击

回答

相关问题