Как использовать Cyclejs с внешним шаблоном

Я хочу начать свой первый проект Cycle.js, и я буду развивать его вместе с другом. Он HTML-дизайнер (много знает о HTML и CSS и создает шаблоны Handlebars), а я немного разбираюсь в JS.

Я хотел бы знать, есть ли какие-либо ресурсы о том, как можно реализовать конструктор HTML ‹--> JS Dev.
Или, другими словами, как извлечь ресурсы HTML в разные файлы.

заранее спасибо


html handlebars.js cyclejs
person Mictian    schedule 07.02.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Для каждого экрана у вас будет функция «просмотра» на JavaScript, где разметка будет написана на JavaScript с помощью гиперскриптов-помощников. Если вам нужно преобразовать HTML-разметку в гиперскрипты, используйте http://html-to-hyperscript.paqmind.com/ .

person André Staltz    schedule 08.02.2016
comment
Спасибо за повтор :D! Есть ли пример, показывающий, как это сделать? Я не вижу ясно, как извлечь создание «VDOM» из представления. Например, в этом простом коде код зависит от карты потока. - person Mictian; 10.02.2016
comment
После просмотра этих видео я намного лучше понимаю ваш ответ. Кстати, я рекомендую их посмотреть, они действительно крутые - person Mictian; 17.02.2016

arrow_upward
0
arrow_downward

У меня похожая ситуация, я программирую бизнес-логику, а моя дочь программирует HTML и CSS. Итак, вдохновленный hyperstream, и поскольку CycleJS использует виртуальную DOM-библиотеку Snabbdom, я написал snabbdom-template. Этот модуль вставляет динамические данные, ориентируясь на стандартные имена тегов HTML и другие селекторы CSS и заменяя фиктивные значения.

Вот упрощенный пример рабочего процесса: сначала я программирую бизнес-логику и основной HTML:

main.js

...

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => div([
        div('#message', 'Ready.'),
        ul('#mapme', list.map(item => li(item)))
      ])
    )

  return {
    DOM: vdom$
  }
}

...

Или — при использовании Babel и snabbdom-jsx:

...
const vdom$ = data$
  .map(list =>
    <div>
      <div id="message">Ready.</div>
      <ul id="mapme">
        {list.map(item => <li>{item}</li>)}
      </ul>
    </div>
  )
...

Затем я говорю своей дочери, что мне нужно сообщение div с id, установленным на «сообщение», за которым следует неупорядоченный список с id, установленным на «mapme». Допустим, она предоставляет файл, содержащий:

список.html

<div>
  <div id="message">Message goes here.</div>
  <ul id="mapme">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Затем я изменяю свой main.js на:

...

const snabbdom_template = require('snabbdom-template')
const fs = require('fs')
const template = fs.readFileSync('list.html', 'utf-8')

function main(sources) {

  const data$ = sources.incomingdata

  const vdom$ = data$
    .map(list => snabbdom_template(template, {
      'div#message': 'Ready.',
      '#mapme': {_map: {'li': list}}
    }))

  return {
    DOM: vdom$
  }
}

...

Когда я связываю main.js с помощью browserify, я добавляю brfs преобразует шаблоны в пакет:

  browserify -t brfs main.js > bundle.js

Теперь она может вносить изменения в list.html — до тех пор, пока остаются основные HTML и идентификаторы или классы, используемые для целевых данных, — и единственное, что мне нужно сделать, — это перекомпоновать.

person bloodyKnuckles    schedule 06.01.2018