1

次のコードを変更して、http からユーザーの配列を受け取り、それらすべてを表示しようとしています。このコードは、単一のユーザーのみを受信して​​表示します。

import Cycle from '@cycle/core';
import {div, button, h1, h4, a, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  const USERS_URL = 'http://jsonplaceholder.typicode.com/users/';
  const getAllUsers$ = sources.DOM.select('.get-all').events('click')
    .map(() => {
      return {
        url: USERS_URL + 1,
        method: 'GET'
      };
    });

  const user$ = sources.HTTP
    .filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
    .mergeAll()
    .map(res => res.body)
    .startWith(null);

  const vtree$ = user$.map(user =>
    div('.users', [
      button('.get-all', 'Get all users'),
      user === null ? null : div('.user-details', [
        h1('.user-name', user.name),
        h4('.user-email', user.email),
        a('.user-website', {href: user.website}, user.website)
      ])
    ])
  );

  return {
    DOM: vtree$,
    HTTP: getAllUsers$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app-main'),
  HTTP: makeHTTPDriver(),
};

Cycle.run(main, drivers);
4

1 に答える 1

2

複数のユーザーに対して 1 つの要求を実行してから、それらを反復処理する必要があります。

すべてのユーザーを取得します。

// rather than getting just user 1
url: USERS_URL,

このストリームを更新:

const users$ = sources.HTTP // users (plural)
.filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
.mergeAll()
.map(res => res.body)
.startWith([]); // start with an empty array

すべてのユーザーのマークアップを生成します。

users.map(user => 
  div('.user-details', [
    h1('.user-name', user.name),
    h4('.user-email', user.email),
    a('.user-website', {href: user.website}, user.website)
  ])
)

完全な動作コードは次のとおりです。

function main(sources) {
  const USERS_URL = 'http://jsonplaceholder.typicode.com/users/';
  const getAllUsers$ = sources.DOM.select('.get-all').events('click')
    .map(() => {
      return {
        url: USERS_URL,
        method: 'GET'
      };
    });

  const users$ = sources.HTTP
    .filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
    .mergeAll()
    .map(res => res.body)
    .startWith([])

  const vtree$ = users$.map(users => {
    return div('.users', [
      button('.get-all', 'Get all users'),
      ...users.map(user => 
        div('.user-details', [
          h1('.user-name', user.name),
          h4('.user-email', user.email),
          a('.user-website', {href: user.website}, user.website)
        ])
      )
    ])
  });

  return {
    DOM: vtree$,
    HTTP: getAllUsers$
  };
}
于 2016-02-18T21:46:40.913 に答える