Question

我正在使用Cycle.js处理todo list示例应用，我遇到了以下问题。当用户点击“添加”按钮时，我正在尝试处理添加新的待办事项项，这样可以正常工作，但另一方面我有一个提供文本输入更改事件的流，当与点击流结合使用时，它会让我的应用添加新的todo项目，即使在文本输入被更改的情况下，但没有单击添加按钮，例如专注。在这种情况下的方法是什么？我可以直接消除todoChange $ stream并从addClick $ stream访问DOM，还是反对Cycle.js哲学？

JS Bin：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')
 });

Answer 1

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

变化：

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

来自sampleCombine docs：

Marble diagram:

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

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

在这种情况下，add$为source，todo$为other。生成的流仅在other已发出值时发出，并且在source发出的值时发出。换句话说，如果source上有值可用于other，则只有在sampleCombine发出时才会发出流。

注意：xstream未包含在默认的import org.apache.spark.sql.functions{min, max} val df = spark.sqlContext.esDF(esInputIndexName) val aggDF = df.groupBy("filenames").agg(min("timestamp").as("minDate"), max("timestamp").as("maxDate")) aggDF.show(10)库中。

ESNextbin演示。

Cycle.js在按钮点击时获得输入值

1 个答案: